lightGallery() 可以用作回调吗？页面加载后只能初始化一次吗？答案

【问题标题】：Can lightGallery() be used as a callback? Can it only initialize once after page load?lightGallery() 可以用作回调吗？页面加载后只能初始化一次吗？
【发布时间】：2017-05-16 01:47:14
【问题描述】：

我在使用 lightGallery() 作为回调时遇到问题；当客户选择产品选项时，我尝试在 Shopify 中使用它。

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

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

【问题讨论】：

标签： jquery callback shopify image-gallery lightgallery

【解决方案1】：

我发现可以一次实例化多个灯光画廊，而不是创建和销毁多个灯光画廊，如下所示：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

写下下面提到的关于 ajax 成功的脚本。

注意：unitPlanslightGallery 是 class 或 id，我们将在其上应用灯光库。

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

【讨论】：