本教程将指导开发者如何在fancybox事件回调中准确获取触发lightbox的dom元素。当`this`指向fancybox实例而无法直接获取触发元素时，我们通过利用`done`或`loading`事件的第二个参数`slide`，并访问`slide.triggerel`属性，来轻松识别并操作原始触发元素，从而实现更精细的控制和数据访问。
在开发基于Fancybox的交互式网页时，开发者经常需要知道是哪个特定的DOM元素触发了当前Lightbox的显示。例如，当页面上存在多个画廊（通过data-fancybox^="gallery-"区分）时，在Fancybox的某个事件回调中，我们可能需要根据触发元素的ID或自定义属性来执行不同的逻辑。然而，在许多Fancybox事件回调中，this上下文通常指向Fancybox实例本身，而非触发Lightbox的DOM元素，这给直接获取触发元素带来了不便。
挑战：在Fancybox事件中获取触发元素
以initLayout事件为例，其回调函数接收fancybox实例作为参数。虽然这个实例包含了大量关于当前Lightbox的信息，但它并没有直接暴露一个属性来指向原始的触发DOM元素。这意味着，如果我们需要在initLayout阶段或类似的其他事件中，基于触发元素的特性来调整布局或加载数据，传统方法会显得力不从心。
Fancybox.bind( '[data-fancybox^="gallery-"]', {
on: {
initLayout: function ( fancybox ) {
// 在这里，'fancybox' 是 Fancybox 实例，无法直接获取触发Lightbox的DOM元素
// 例如，无法直接获取 <div data-fancybox="gallery-3"></div>
},
},
} );解决方案：利用done或loading事件的slide.triggerEl
Fancybox提供了一个优雅的解决方案，通过其done或loading事件回调函数的第二个参数——slide对象。这个slide对象包含了当前幻灯片的详细信息，其中一个关键属性是triggerEl，它直接指向触发当前Fancybox实例的原始DOM元素。
slide.triggerEl 的作用
slide.triggerEl属性返回的是一个标准的DOM元素对象，你可以像操作任何其他DOM元素一样操作它，例如访问其属性（id, className）、自定义数据属性（dataset）或执行DOM操作。
实施步骤
- 绑定Fancybox事件： 像往常一样，使用Fancybox.bind()方法绑定你的目标元素。
- 监听done或loading事件： 在on配置中，添加对done或loading事件的监听。
- 访问slide.triggerEl： 在事件回调函数中，第二个参数就是slide对象。通过slide.triggerEl即可获取到触发元素。
示例代码
以下代码展示了如何在done事件中获取触发Fancybox的DOM元素，并访问其data-fancybox属性：
// 假设 HTML 结构如下：
// <div id="gallery-container-1">
// <a href="image1.jpg" data-fancybox="gallery-1" data-custom-info="first-image">图片 1</a>
// <a href="image2.jpg" data-fancybox="gallery-1">图片 2</a>
// </div>
// <div id="gallery-container-2">
// <a href="image3.jpg" data-fancybox="gallery-2" data-custom-info="third-image">图片 3</a>
// </div>
Fancybox.bind('[data-fancybox^="gallery-"]', {
on: {
/**
* done 事件在 Fancybox 内容完全加载并显示后触发。
* @param {object} fancybox - Fancybox 实例
* @param {object} slide - 当前幻灯片对象
*/
done: function (fancybox, slide) {
console.log('Fancybox done 事件触发。');
// slide.triggerEl 就是触发当前 Fancybox 的 DOM 元素
const triggerElement = slide.triggerEl;
if (triggerElement) {
console.log('触发 Fancybox 的 DOM 元素:', triggerElement);
console.log('DOM 元素的 ID:', triggerElement.id); // 如果触发元素有ID
console.log('data-fancybox 属性值:', triggerElement.dataset.fancybox);
console.log('data-custom-info 属性值:', triggerElement.dataset.customInfo);
// 根据触发元素的不同执行特定操作
if (triggerElement.dataset.fancybox === 'gallery-1') {
console.log('这是来自 Gallery 1 的 Fancybox。');
// 可以在这里对 gallery-1 相关的元素进行操作，或者根据 data-custom-info 执行逻辑
} else if (triggerElement.dataset.fancybox === 'gallery-2') {
console.log('这是来自 Gallery 2 的 Fancybox。');
}
}
},
/**
* loading 事件在 Fancybox 内容开始加载时触发，比 'done' 事件更早。
* @param {object} fancybox - Fancybox 实例
* @param {object} slide - 当前幻灯片对象
*/
loading: function (fancybox, slide) {
console.log('Fancybox loading 事件触发。');
const triggerElement = slide.triggerEl;
if (triggerElement) {
console.log('触发 Fancybox 的 DOM 元素 (加载中):', triggerElement);
// 可以在内容加载前进行一些预处理，例如显示自定义加载动画
}
}
},
});done 与 loading 事件的选择
- loading 事件： 在Fancybox内容开始加载时触发。如果你需要在内容加载之前获取触发元素并执行某些操作（例如，根据触发元素动态调整加载动画、预设数据或进行权限检查），loading 是一个更早、更合适的选择。
- done 事件： 在Fancybox内容完全加载并显示在屏幕上之后触发。如果你需要确保所有内容都已就绪，并且Fancybox布局已稳定，例如需要测量元素尺寸或执行依赖于完整布局的动画，那么done事件是更合适的时机。
注意事项
- slide.triggerEl指向的是实际触发Fancybox的DOM元素。 在多画廊场景中，这通常是画廊中的某个链接或图片元素。如果你的Fancybox绑定在一个父级div上，并且该div本身就是点击触发器，那么triggerEl将指向该div。
- 利用dataset属性： 通过slide.triggerEl.dataset可以方便地访问该元素的data-*自定义属性。这对于获取特定画廊ID、内容类型或其他自定义配置信息非常有用。
- 兼容性： dataset属性在现代浏览器中广泛支持。对于需要兼容IE10以下浏览器的项目，可能需要使用getAttribute('data-fancybox')等传统方法。
总结
通过利用Fancybox done 或 loading 事件的 slide 参数，并访问其 triggerEl 属性，开发者可以轻松地在事件回调中识别并操作触发Lightbox的原始DOM元素。这一机制为实现复杂的交互逻辑、动态内容加载以及基于触发元素特性的个性化体验提供了强大的基础。掌握这一技巧，将使你在使用Fancybox时拥有更精细的控制能力。
