Shopify商店Fancybox图库异常：点击任意图片均从首张打开

问题描述 #

在Shopify商店使用Fancybox时，点击图库中的任意图片，图库都会从第一张图片开始展示，而非点击的那张。使用的代码是直接从fiddle复制的：

<div>
  <a
     data-fancybox="gallery"
     href="https://lipsum.app/id/2/1024x768"
     data-caption="Optional caption,<br />that can contain <em>HTML</em> code"
     >
    <img src="https://lipsum.app/id/2/200x150" />
  </a>

  <a data-fancybox="gallery" href="https://lipsum.app/id/3/1024x768">
    <img src="https://lipsum.app/id/3/200x150" />
  </a>

  <a data-fancybox="gallery" href="https://lipsum.app/id/4/1024x768">
    <img src="https://lipsum.app/id/4/200x150" />
  </a>
</div>

可能的原因及解决步骤 #

1. 初始化时机不对 #

Fancybox需要在DOM完全加载后再初始化，如果代码执行时图片链接还没渲染到页面上，就会导致绑定异常。

解决办法：
确保初始化代码在DOM加载完成后执行，用原生JS的话：

document.addEventListener('DOMContentLoaded', function() {
  Fancybox.bind('[data-fancybox="gallery"]', {});
});

如果用的是jQuery版本的Fancybox：

$(document).ready(function() {
  $('[data-fancybox="gallery"]').fancybox();
});

2. 主题自带的Lightbox冲突 #

部分Shopify主题自带了图片灯箱功能，可能会和Fancybox的事件绑定冲突，导致Fancybox的默认行为被覆盖。

解决办法：

• 找到主题设置中自带的灯箱选项，将其关闭；
• 如果找不到关闭选项，检查主题的JS文件，找到灯箱相关代码并注释掉，或者给Fancybox的绑定事件设置更高优先级。

3. 动态加载元素未重新绑定 #

如果图库是通过Shopify动态加载（比如产品加载、分页加载）生成的，Fancybox的初始绑定不会作用到新生成的元素上。

解决办法：
使用事件委托方式绑定，或者在动态元素加载完成后重新调用Fancybox初始化代码。示例：

// 原生JS事件委托方式
document.addEventListener('click', function(e) {
  const target = e.target.closest('[data-fancybox="gallery"]');
  if (target) {
    e.preventDefault();
    const galleryItems = [...document.querySelectorAll('[data-fancybox="gallery"]')];
    Fancybox.open(galleryItems, {
      startIndex: galleryItems.indexOf(target)
    });
  }
});

4. Fancybox版本问题 #

不同版本的Fancybox API存在差异，旧版本可能存在这类已知问题。

解决办法：
更新到Fancybox的最新稳定版本，同时确保初始化代码匹配新版本API（比如新版本用Fancybox.bind，旧版本可能用$().fancybox）。

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