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