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.

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.

• javascript
• jquery
• ajax
• plugins
• lightgallery

Share Improve this question Follow asked Oct 14, 2016 at 8:16 Deepak KishoreDeepak Kishore 13811 silver badge99 bronze badges 3

• Please add the code where you load more images – Rory McCrossan Commented Oct 14, 2016 at 8:20
• 1 can you make a fiddle? – Adrian C. Commented Oct 14, 2016 at 8:21
• 1 checkout this! Its might help you. codepen.io/sachinchoolur/details/QjLNMM – Balasubramanian Commented Oct 14, 2016 at 8:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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();
    }
});

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'
});

}