Galeria Lightbox com Bootstrap

Todos procuram uma galeria de imagens simples e que pode ser dinâmica para maior comodidade e que funcione em todos os projetos posteriores e seja responsivo.

Vemos abaixo um exemplo de galeria funcional e adaptável, que poderá ajudar você em muitos de seus jobs.

Primeiro vou setar o HTML:

<div class="container">
    <div class="row">
        <div class="col-md-10 offset-md-1">          
            <div data-code="example-2">
                <div class="row">
                    <div class="offset-md-2 col-md-8">
                        <div class="row">
                            <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
                            </a>
                            <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
                            </a>
                            <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
                            </a>
                        </div>
                        <div class="row">
                            <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
                            </a>
                            <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
                            </a>
                            <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
                                <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Arquivos CSS utilizados:

  • Bootstrap ( bootstrap.min.css ) utilizado para realizar estilização do modal e alinhar as imagens.
  • Lightbox ( ekko-lightbox.css ) muito usado para realizar as funções CSS no Modal Slider.

Obs. Basta entender o básico de HTML e CSS para modifica-los como desejar, sem crise. 😉

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/ekko-lightbox.css" rel="stylesheet">

Arquivos JS utilizados:

  • Ambos são prontos ( ekko-lightbox.js ) e ( jquery.min.js ), que vem junto no pacote do Lightbox.
  • Bootstrap para abrir o modal, vem no pacote baixado no site da bootstrap.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ekko-lightbox.js"></script>

Aqui abaixo vem o script que criei em base do que vem quando você baixa o plugin do site. Se preferir pode baixar esse plugin original na lokeshdhakar.com.

Abaixo ele delega a chamada do data-toggle=”lightbox” aonde faz ele abrir o modal com o slide lightbox.

$(document).ready(function ($) {
    // Delegate calls to data-toggle="lightbox" = Aqui ele delega chamdas para o data-toggle="lightbox"
    $(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', function(event) {
        event.preventDefault();
        return $(this).ekkoLightbox({
            onShown: function() {
                if (window.console) {
                    return console.log('Checking our the events huh?');
                }
            },
            onNavigate: function(direction, itemIndex) {
                if (window.console) {
                    return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                }
            }
    });
});

    //Programmatically call = Chamada programada
    $('#open-image').click(function (e) {
        e.preventDefault();
        $(this).ekkoLightbox();
    });
    $('#open-youtube').click(function (e) {
        e.preventDefault();
        $(this).ekkoLightbox();
    });

Setando a função de navegação do slide.

// NavigateTo = Navegação do Slide
$(document).on('click', '[data-toggle="lightbox"][data-gallery="navigateTo"]', function(event) {
    event.preventDefault();

    return $(this).ekkoLightbox({
        onShown: function() {

            this.modal().on('click', '.modal-footer a', function(e) {

                e.preventDefault();
                this.navigateTo(2);

            }.bind(this));

        }
    });
});

A ultima parte do script vem no pacote do plugin Lightbox.

/**
* Documentation specific - ignore this, it's original plugin =  Documentação especifica -  Ignore isso, é original plugin
*/
anchors.options.placement = 'left';
anchors.add('h3');
$('code[data-code]').each(function() {

    var $code = $(this),
        $pair = $('div[data-code="'+$code.data('code')+'"]');

    $code.hide();
    var text = $code.text($pair.html()).html().trim().split("\n");
    var indentLength = text[text.length - 1].match(/^\s+/)
    indentLength = indentLength ? indentLength[0].length : 24;
    var indent = '';
    for(var i = 0; i < indentLength; i++)
        indent += ' ';
    if($code.data('trim') == 'all') {
        for (var i = 0; i < text.length; i++)
            text[i] = text[i].trim();
    } else  {
        for (var i = 0; i < text.length; i++)
            text[i] = text[i].replace(indent, '    ').replace('    ', '');
    }
    text = text.join("\n");
    $code.html(text).show();

});
});

Veja o exemplo:

CLIQUE AQUI

Download dos arquivos do exemplo:

CLIQUE AQUI


Compartilhe este artigo com seus amigos!

WebLink Hospedagem cPanel

AmazingWP - Tema Espetacular para WordPress