Fancybox事件回调中识别触发元素：使用slide.triggerEl

Fancybox.bind( '[data-fancybox^="gallery-"]', {
    on: {
        initLayout: function ( fancybox ) {
            // 在这里，'fancybox' 是 Fancybox 实例，无法直接获取触发Lightbox的DOM元素
            // 例如，无法直接获取 <div data-fancybox="gallery-3"></div>
        },
    },
} );

// 假设 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);
        // 可以在内容加载前进行一些预处理，例如显示自定义加载动画
      }
    }
  },
});