javascript - 如何在lightgallery上添加自定义触发器？

`https://codepen.io/sumankarki/pen/LYVxMyR`

这是指向基本lightgallery页面的codepen链接。请打开链接并交叉检查问题。

如在代码笔上所见，当我们直接单击图像时，我们可以触发弹出窗口。我在图库下面创建了两个名为“自动播放”和“全屏”的按钮。

这里的问题是，如何才能通过按钮仅定位特定任务？例如，如果我们单击“自动播放”按钮，则图库应自动弹出，而“全屏”则用于全屏任务。我们可以通过我制作的自定义按钮来实现吗？

最佳答案

当然可以。您只需要查看here中找到的lightgallery插件文档，然后通过jQuery选择器和事件处理程序将按钮与正确的lightgallery命令连接。

例如，对于第一个按钮-autoplay-，代码如下所示：

$(document).ready(function() {
  $('#lightgallery').lightGallery({
    pager: true
  });

  $("li.autoplay-trigger").on("click", function(){

    $("#lightgallery a:first-child > img").trigger("click");

  });

  $("li.autoplay-fullscreen").on("click", function(){

    $("#lightgallery a:first-child > img").trigger("click");

  });

});

由于该插件似乎没有通过自定义设置触发图库的选项，因此一种解决方案是在单击按钮时销毁图库，然后使用自定义设置对其进行初始化。

这是一个codepen来演示这种方法。

关于javascript - 如何在lightgallery上添加自定义触发器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60390535/