Lightgallery does not work after loading more data from ajax response

[akramg478]

Hi,

We are using as you intended and still facing some issues over our lightbox plugin, here is the URL http://demo.renajans.com/referans-islerimiz/ once you click load more it loads perfectly and does not append that data in our lightbox and also it does not fires on click of new loaded images.

Here is the code I am using: To run it first time on page load:

var lightGallery = jQuery('.mp-show-lightbox-on');
    lightGallery.lightGallery({
        selector: '.mp-gallery-box',
        subHtmlSelectorRelative: true
    });

and this is how I destroy it and then restarts: To destroy:

lightGallery.data("lightGallery").destroy(true);

and it destroys perfectly: To reinitiate:

lightGallery.data("lightGallery").destroy(true);

To reinitiate:

lightGallery.lightGallery({
                            selector: '.mp-gallery-box',
                            subHtmlSelectorRelative: true
                        });

But it does not work I also append data in the code which works fine as well by using lightGallery.append(response); which appends items in the dom but only issue is I am unable to reinitiate by clicking on the items I readded by ajax ...

[sachinchoolur]

Hey @akramg478,

This is not an issue of lightGallery. I think in your code imagesLoaded function takes time to excecute and at the time you re-initialize lightGallery new images are not available in the dom.

// This funcion takes time
$(response).imagesLoaded( function(){                       
                            $container.isotope( 'insert', $(response) );
                            $container.isotope();
                        });
                        btnthis.data('page', newPage);

// $(response) is not avaialbe in the dom
                        if(jQuery('.gt-show-lightbox-on').data("lightGallery")){
                            jQuery('.gt-show-lightbox-on').data("lightGallery").destroy(true);
                            gtcreateLightGallery();
                        }

Try using lightGallery function inside imagesLoaded callback

$(response).imagesLoaded( function(){                       
                            $container.isotope( 'insert', $(response) );
                            $container.isotope();

if(jQuery('.gt-show-lightbox-on').data("lightGallery")){
                            jQuery('.gt-show-lightbox-on').data("lightGallery").destroy(true);
                            gtcreateLightGallery();
                        }
                        });
                        btnthis.data('page', newPage);

BTW since you are using the jQuery version of lightGallery, please log the bus in the actual repo- https://github.com/sachinchoolur/lightGallery

This repo is for vanilla version of lightGalleryy