Fancybox: 在事件中获取 Lightbox 的 DOM 元素

本文介绍了如何在 Fancybox 的事件处理函数中获取触发 Lightbox 的 DOM 元素，例如在 `initLayout` 或 `done` 事件中使用 `slide.triggerEl` 属性来访问该元素，并展示了如何利用该元素获取自定义数据属性。

在使用 Fancybox 构建画廊时，有时需要在特定的事件（例如 initLayout、loading 或 done）中访问触发 Lightbox 的原始 DOM 元素。这允许你根据触发元素的属性（例如 data-fancybox）执行自定义操作。

Fancybox 实例本身（this）并不直接提供对触发元素的引用。但是，在事件处理函数中，你可以通过第二个参数 slide 来访问该元素。slide 对象包含了有关当前幻灯片的各种信息，包括触发它的 DOM 元素。

以下代码演示了如何在 done 事件中获取触发元素的 DOM 元素及其 data-fancybox 属性：

Fancybox.bind('[data-fancybox^="gallery-"]', {
  on: {
    done: function (fancybox, slide) {
      // slide.triggerEl 是触发 Lightbox 的 DOM 元素
      // slide.triggerEl.dataset.fancybox 是元素的 data-fancybox 属性值

      console.log(slide.triggerEl, slide.triggerEl.dataset.fancybox);
    },
  },
});

在上述代码中，slide.triggerEl 包含了触发 Lightbox 的 DOM 元素的引用。通过 slide.triggerEl.dataset.fancybox，你可以访问该元素的 data-fancybox 属性，从而确定触发 Lightbox 的画廊。

Content at Scale

SEO长内容自动化创作平台

154 查看详情

如果你需要在更早的阶段访问触发元素，例如在 Lightbox 加载之前，可以将 done 事件替换为 loading 事件：

Fancybox.bind('[data-fancybox^="gallery-"]', {
  on: {
    loading: function (fancybox, slide) {
      // slide.triggerEl 是触发 Lightbox 的 DOM 元素
      console.log(slide.triggerEl);
    },
  },
});

注意事项：

• slide.triggerEl 属性只有在相应的事件触发时才可用。
• 确保你的选择器（例如 [data-fancybox^="gallery-"]）正确匹配你想要绑定的 DOM 元素。

总结：

通过利用 slide.triggerEl 属性，你可以在 Fancybox 的事件处理函数中轻松访问触发 Lightbox 的 DOM 元素，并根据需要执行自定义操作。这为构建更灵活和可定制的画廊提供了强大的功能。

以上就是Fancybox: 在事件中获取 Lightbox 的 DOM 元素的详细内容，更多请关注其它相关文章！