时间戳

首页 > 解决方案 > 如何在 lightgallery 上添加自定义触发器？

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

问题描述

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

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

正如在codepen上看到的，当我们直接点击图像时，我们可以触发弹出窗口。我在图库下方创建了两个名为“自动播放”和“全屏”的按钮。

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

标签： javascriptjquery

解决方案

你当然可以这样做。您只需检查此处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");

  });

});

由于该插件似乎没有使用自定义设置触发图库的选项，因此一种解决方案是在单击按钮时销毁图库并使用自定义设置重新初始化它。

这是一个演示这种方法的代码笔。

推荐阅读