CODEWITHSUNDEEP
javascriptjqueryajaxpluginslightgallery
Deepak Kishore
Deepak Kishore

Reputation: 138

How to reinitialize the lightgallery after ajax call

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.

Upvotes: 3

Views: 6047

Answers (2)

Monique Noche
Monique Noche

Reputation: 1

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

}

Upvotes: 0

Taha Paksu
Taha Paksu

Reputation: 15616

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

Upvotes: 6

Related Questions