Yearly Archives: 2019

É muito comum que sites que possuem galeria de fotos precisem de um lightbox para poder ver melhor as fotos. Existem muitos plugins pra isso, mas plugins podem dar problemas ao longo do tempo. Então criei um lightbox simples, que você pode personalizar como quiser.
Na página onde você possui a galeria de fotos, no meu caso a galeria fica na single-product.php, vamos colocar este código html:

<div class="lightbox-product">
    <a class="btn-blue prev-photo"><i class="fas fa-caret-left"></i></a>
        <div class="content-light-img">
            <a class="btn-blue close-light"><i class="fas fa-times"></i></a>
            <img>
        </div>
    <a class="btn-blue next-photo"><i class="fas fa-caret-right"></i></a>
</div>

E no arquivo JS vão os códigos:
– Esse bloco pega as informações da foto clicada, pego o src da imagem e o id e coloco na tag <img> que está dentro do ‘content-light-img’;

   $('.thumbnail-principal').on('click', function(){
       var src =  $('.thumbnail-principal .slick-current').attr('src');
       var id =  $('.thumbnail-principal .slick-current').attr('id');
        $('.lightbox-product img').attr('src',src);
        $('.lightbox-product img').attr('id',id);
         $('.lightbox-product').fadeIn();
         $('.lightbox-product').css('display','flex');
    });

– Este código é o do botão que passa para a próxima foto, pegamos o id da foto atual dentro do lightbox e contamos a quantidade de fotos dentro do container, se o id for igual a quantidade de fotos voltamos para 1 senão soma-se mais 1 ao id.  Com o resultado dessa soma pegamos as informações da próxima foto.

    $('.next-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == photos){
            var result = 1;
        } else {
            var result = parseInt(id) + 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

 
– Esse código é do botão que volta uma foto, como no botão next pegamos todas as informações da foto que está no lightbox só que ao contrário do outro subtraímos 1 do id, e quando id for igual a 1 dizemos ao contador que ele é igual a quantidade de fotos dentro do container.

    $('.prev-photo').on('click', function(){
        var id = $('.lightbox-product img').attr('id');
        var photos = $('.thumbnail-principal .slick-slide').length;
        if(id == 1){
            var result = photos;
        } else {
            var result = parseInt(id) - 1;
        }
        var value_result = $('.thumbnail-principal .slick-slide#'+result).attr('src');
        $('.lightbox-product img').attr('src',value_result);
        $('.lightbox-product img').attr('id',result);
    });

– E por ultimo esse código que fecha o lightbox;

    $('.close-light').on('click', function(){
        $('.lightbox-product').fadeOut();
    });

E esse foi o resultado:

Nesse lightbox eu usei os efeitos de Fade do javascript, mas você pode animar da forma que achar melhor.
Espero ter ajudado, e até a próxima!