Multiple Gallery with Lightgallery

Asked

Viewed 61 times

0

I’m using the plugin Lightgallery, on the page I have several galleries, I am displaying only one image of each gallery, so that when there is the click on this image it opens its respective gallery.

<img src="assets/images/lisboa/1.jpg" id="galeria_1" galeria_id="galeria_1">

    $(document).ready(function() {
        $('#galeria_1').on('click', function(){

            var galeria_id = $(this).attr("galeria_id");

            $("#"+galeria_id).lightGallery({
                download: false,
                counter: false,
                hash: true,
                galleryId: galeria_id
            });
        });
    });

Just nothing happens and no errors in the console.

javascript

  • The link you passed is from the pure javascript version, but you are using the jquery, right?

  • Instead of applying the lightGallery comment on click, Because you don’t make a .each for all items and always applies, so seen in the documentation and examples when clicking on the element opens the image.

  • need to use it with the click on only one item, which in this case is any image, when clicking on it, it should open the gallery corresponding to its attribute galeria_id

  • So, but when executing .lightGallery({}) inside the click, it will configure the element to be the gallery and not open the gallery... so I said you should do this for each link q will open a different gallery. .lightGallery({}) should be executed when dom is ok....

1 answer

0


I solved 

<img src="assets/images/lisboa/1.jpg" class="galeria galeria_bt" galeria_id="galeria_1">

<div id="galeria_1" class="galeria" style="display:none">
    <div class="item1" data-src="assets/images/lisboa/2.jpg" data-sub-html="">
        <img class="" src="assets/images/lisboa/2.jpg">
    </div>
    <div class="" data-src="assets/images/lisboa/3.jpg" data-sub-html="">
        <img class="" src="assets/images/lisboa/3.jpg">
    </div>
</div>


$(document).ready(function()
{
    $(".galeria").lightGallery({
        download: false,
        thumbnail:true
    });

    $('.galeria_bt').on('click', function(){
        var galeria_id = $(this).attr("galeria_id");
        $("#"+galeria_id+" div:first-child").trigger('click');
    });
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.