Can lightGallery() be used as a callback? Can it only initialize once after page load?

Question

I'm having trouble using lightGallery() as a callback; I'm trying to use this in Shopify when a customer is selecting product options.

For example, I have a div #lightgallery that has 5 images, and after the page loads, $("#lightgallery").lightGallery(); is called.

When a customer chooses a product variant, the previous 5 images in #lightgallery are removed, a new 4 images of the variant are created, but $("#lightgallery").lightGallery(); doesn't initialize the new gallery for the variant.

Answer 1

Rather than creating and destroying several lightgalleries, I found out that multiple light galleries can be instantiated at once, like so:

$('.gallery').lightGallery();

Answer 2

lightGallery needs to be destroyed before a new one is instantiated. So, I call the destroy() method on the onCloseAfter event:

const $lg = $("#lightgallery");    
$lg.lightGallery();

$lg.one('onCloseAfter.lg',function(event){
  $lg.data('lightGallery').destroy('true');
});

Note $lg.one and NOT $lg.on, check out mervick's last comment here: https://github.com/sachinchoolur/lightGallery/issues/238

Answer 3

Write down the below mention script on ajax success.

Note: unitPlanslightGallery is the class or id on which we are applying the light gallery.

var lg = jQuery('.unitPlanslightGallery');
// destroy
lg.data('lightGallery').destroy(true);