Shopify Question posted in
The Shopify help center can be found here.

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

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

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

    $('.gallery').lightGallery();
    Login or Signup to reply.
  3. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search