怎样用slide.triggerEl识别Fancybox触发元素？

你了解有个东西叫Fancybox吗？就是那个地方的能让你在网页上点个图就全屏看图的玩意儿。有时候我们需要在它弹出来的时候做点啥，比如根据你点的是哪个图来变一下布局啥的。但是呢，它默认给你的信息里没有直接告诉你是哪个元素触发了它，佛系。。

问题的根源

当你在采用Fancybox的时候， 你有可能会用到它的一些事件回调，比如initLayout。在当前这个回调里传给你的参数是个Fancybox实例，但当前这个实例里没有直接指向你点击的那个地方的元素的属性，破防了...。

( '', {
    on: {
        initLayout: function  {
            // 在这里 'fancybox' 是 Fancybox 实例，无法直接获取触发Lightbox的DOM元素
            // 举个例子，无法直接获取触发元素
        },
    },
} );

这就尴尬了你想根据你点的图的不同来干点不一样的事， 是不是？ 但fancybox实例不告诉你是哪个图。

解决方案：利用done或loading事件的slide.triggerEl

幸良好，Fancybox提供给了个解决方案。在它的done或loading事件里会给你传个叫slide的参数。当前这个slide对象里有个属性叫triggerEl它就是你点击的那个地方的DOM元素，一句话概括...。

triggerEl属性返回的是一个标准的DOM元素对象， 你能够像操作任意其他DOM元素一样操作它，举个例子访问其属性、自定义数据属性或落实DOM操作。

得了吧... 本教程将指导开发者怎样在fancybox事件回调中准确获取触发lightbox的dom元素。当this指向fancybox实例而无法直接获取触发元素时 我们通过利用done或loading事件的第二个参数slide并访问triggerEl属性，来轻巧松识别并操作原始触发元素，从而实现更精细的控制和数据访问。

代码示例

以下代码展示了怎样在done事件中获取触发Fancybox的DOM元素， 并访问其data-fancybox属性：，说到底。

$.fancybox({
  on: {
    done: function {
      var triggerElement = slide.triggerEl;
      console.log);
    }
  }
});

在开发基于Fancybox的交互式网页时开发者时常需要了解是哪个特定的DOM元素触发了当前Lightbox的体现。举个例子， 当页面上存在更多个不同画廊时在Fancybox的某个事件回调中，我们有可能需要根据触发元素的ID或自定义属性来落实不同的逻辑。只是 在许更多Fancybox事件回调中，this上下文通常指向Fancybox实例本身，而非触发Lightbox的DOM元素，这给直接获取触发元素带来了不便。

总的来说... 通过采用Fancybox的done或loading事件，并访问slide对象的triggerEl属性，我们能够轻巧松地在事件回调中获取到原始的触发DOM元素。这为开发者提供给了更较大的灵活性和控制力，使得根据不同触发元素落实定制化逻辑成为有可能。希望本教程能协助您更良好地明白和利用这一特性，提升您的Web开发效率和用户体验。

我特意加了点奇怪的东西，如`