如何让Fancybox仅显示Isotope当前筛选结果的缩略图？

旧版代码失效的核心原因是新版Fancybox（v3+）完全重构了API，不再依赖旧的rel属性或全局实例绑定逻辑，必须通过动态更新绑定元素集合来实现筛选后仅展示可见图片的需求。以下是针对原生JS和jQuery两种场景的解决方案：

核心思路 #

每次Isotope筛选完成后，销毁旧的Fancybox实例，重新仅对当前可见的图片元素绑定Fancybox事件。

原生JS版本代码示例 #

HTML结构（适配示例）

<div class="grid">
  <div class="grid-item" data-category="nature">
    <a href="full-img-1.jpg" class="fancy-trigger">
      <img src="thumb-1.jpg" alt="自然风景">
    </a>
  </div>
  <div class="grid-item" data-category="city">
    <a href="full-img-2.jpg" class="fancy-trigger">
      <img src="thumb-2.jpg" alt="城市建筑">
    </a>
  </div>
  <!-- 更多图片项 -->
</div>

<!-- 筛选按钮 -->
<button class="filter-btn" data-filter="*">全部</button>
<button class="filter-btn" data-filter="[data-category='nature']">自然</button>
<button class="filter-btn" data-filter="[data-category='city']">城市</button>

JavaScript逻辑

// 初始化Isotope
const grid = document.querySelector('.grid');
const iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// 封装Fancybox初始化函数
function initFilteredFancybox() {
  // 销毁已有Fancybox实例，避免冲突
  if (Fancybox.getInstance()) {
    Fancybox.destroy();
  }
  
  // 获取Isotope筛选后的可见元素内的触发链接
  const visibleTriggers = iso.filteredItems.map(item => item.element.querySelector('.fancy-trigger'));
  
  // 仅对可见元素绑定Fancybox
  Fancybox.bind(visibleTriggers, {
    loop: true,
    // 自定义标题（可选）
    caption: (fancybox, slide) => slide.$trigger.querySelector('img').alt
  });
}

// 页面加载完成后首次初始化
document.addEventListener('DOMContentLoaded', initFilteredFancybox);

// 绑定筛选按钮事件
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const filterVal = btn.getAttribute('data-filter');
    iso.arrange({ filter: filterVal });
    
    // 等待Isotope布局完成后重新初始化Fancybox
    iso.once('arrangeComplete', initFilteredFancybox);
  });
});

jQuery版本代码示例 #

如果你的项目仍在使用jQuery版的Isotope和Fancybox，可使用以下代码：

// 初始化Isotope
const $grid = $('.grid').isotope({
  itemSelector: '.grid-item'
});

// 封装Fancybox初始化函数
function initFilteredFancybox() {
  // 销毁旧实例
  $.fancybox.destroy();
  
  // 获取筛选后的可见元素内的触发链接
  const $visibleTriggers = $grid.isotope('getFilteredItemElements').find('.fancy-trigger');
  
  // 绑定Fancybox
  $visibleTriggers.fancybox({
    loop: true,
    caption: function() {
      return $(this).find('img').attr('alt');
    }
  });
}

// 页面加载完成后首次初始化
$(document).ready(initFilteredFancybox);

// 筛选按钮事件绑定
$('.filter-btn').on('click', function() {
  const filterVal = $(this).data('filter');
  $grid.isotope({ filter: filterVal }).one('arrangeComplete', initFilteredFancybox);
});

关键注意事项 #

1. 移除自动初始化属性：确保图片触发链接上没有data-fancybox属性，避免Fancybox自动全局绑定所有元素。
2. 版本兼容性：确认引入的是Fancybox v3/v4的官方脚本和样式，旧版v2的API完全不兼容此方案。
3. 动态元素适配：如果页面存在动态添加的图片项，需在元素添加完成后重新调用initFilteredFancybox()函数。

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