
本文介绍了如何在 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 的画廊。
如果你需要在更早的阶段访问触发元素,例如在 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 元素,并根据需要执行自定义操作。这为构建更灵活和可定制的画廊提供了强大的功能。










