How to reinitialize the lightgallery after ajax call

Question

I am using lightgallery plugin to display images of my website on click. I initialized the light gallery as

$(document).ready(function(){
    $('#lightgallery').lightGallery({
        selector: '.item'
    });
});

At the document load its working fine. The problem is when i am loading more images and appending them using jquery i want to reinitialize the lightgallery again to work for the iamges loaded by ajax call. But the lightgallery is not working for them. It is working only for the images which are loaded at the time of page loading.

checkout this! Its might help you. http://codepen.io/sachinchoolur/details/QjLNMM/ — Balasubramanian, Oct 14 '16 at 08:26

score 6 · Answer 1 · answered Oct 14 '16 at 08:50

This might help:

function createLightGallery()
{
    $('#lightgallery').lightGallery({
        selector: '.item'
    });
}

// on document load
$(document).ready(function(){
    createLightGallery();
});

// on the AJAX request
$.ajax({ 
    url: "/get_images",
    .
    .
    success: function()
    {
         if("#lightgallery").data("lightGallery"))
             $("#lightgallery").data("lightGallery").destroy(true);
         createLightGallery();
    }
});

score 0 · Answer 2 · answered Oct 10 '19 at 02:45

This is my answer that works in ajax

success: function() {

//destroy your lightgallery
 try{ $('#lightgallery').lightGallery(); $('#lightgallery').data('lightGallery').destroy(true); }catch(ex){};

//and then re-initiate gallery again
$('#lightgallery').lightGallery({
    selector: '.item'
});

}

How to reinitialize the lightgallery after ajax call

2 Answers2