lightGallery（）可以用作回调吗？它只能在页面加载后初始化一次吗？

Question

我在使用lightGallery（）作为回调时遇到了问题;当客户选择产品选项时，我试图在Shopify中使用它。

例如，我有一个div #lightgallery，它有5张图片，在页面加载后，$("#lightgallery").lightGallery();被调用。

当客户选择产品版本时，#lightgallery中的前5张图片会被删除，会创建新版本的4张图片，但$("#lightgallery").lightGallery();并未初始化新图库变种。

Answer 1

我发现可以同时实例化多个灯廊，而不是创建和销毁几个灯廊，如下所示：

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

Answer 2

lightGallery需要在实例化新的之前销毁。所以，我在onCloseAfter事件上调用destroy（）方法：

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

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

注意$lg.one而不是$lg.on，请查看mervick的最新评论： https://github.com/sachinchoolur/lightGallery/issues/238

Answer 3

写下有关Ajax成功的以下脚本。

请注意：unitPlanslightGallery是我们要应用灯库的class或id。

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