Fancybox：如何在initLayout事件中获取当前画廊的DOM元素？

你可以通过以下步骤在initLayout回调中拿到当前幻灯片所属的画廊DOM元素：

• 从Fancybox实例的current.target属性获取触发当前幻灯片的DOM元素
• 提取该元素的data-fancybox属性值（即画廊标识）
• 用这个标识匹配对应的画廊容器

修改后的代码示例：

Fancybox.bind('[data-fancybox^="gallery-"]', {
    on: {
        initLayout: function (fancybox) {
            // 获取触发当前幻灯片的元素
            const triggerElement = fancybox.current.target;
            // 获取当前画廊的唯一标识
            const galleryIdentifier = triggerElement.getAttribute('data-fancybox');
            // 定位到对应的画廊DOM容器
            const galleryElement = document.querySelector(`[data-fancybox="${galleryIdentifier}"]`);

            // 验证并使用获取到的画廊元素
            if (galleryElement) {
                // 这里可以添加你需要的逻辑
                console.log("当前画廊元素：", galleryElement);
            }
        },
    },
});

说明 #

fancybox.current.target指向的是触发当前Fancybox弹窗的具体元素（比如某个图片或触发按钮），这个元素的data-fancybox属性值和它所属的画廊容器的该属性值完全一致，因此可以通过这个值精准定位到对应的画廊DOM元素。

内容的提问来源于stack exchange，提问作者Gavin