应用CMS列表筛选后如何更新Fancybox 4的内容？

问题原因 #

你之前的方案失败主要有两个原因：

• visibleLinks是页面加载时获取的静态集合，筛选后不会自动更新为当前可见元素
• 在点击事件中才解绑/重新绑定，此时原Fancybox的绑定已经触发，导致逻辑冲突

可靠解决方案 #

方法1：点击时动态构建Fancybox相册列表 #

放弃自动绑定，改为点击时实时收集可见元素并手动打开Fancybox，这种方式最直观且不易出错：

// 给所有缩略图绑定点击事件
$('.lightbox-link').on('click', function(e) {
  e.preventDefault(); // 阻止默认跳转

  // 实时收集当前可见的所有lightbox链接，转换为Fancybox需要的item格式
  const visibleItems = $('.lightbox-link:not(:hidden)').map(function() {
    return {
      src: this.href, // 高清图地址
      caption: this.dataset.caption || '', // 图片说明（根据你的实际属性调整）
      thumb: this.querySelector('img').src // 缩略图地址（可选）
    };
  }).get();

  // 找到当前点击元素在可见列表中的位置
  const currentIndex = visibleItems.findIndex(item => item.src === this.href);

  // 打开Fancybox，传入筛选后的列表和起始索引
  Fancybox.show(visibleItems, {
    startIndex: currentIndex
  });
});

方法2：利用Mixitup筛选完成事件更新Fancybox绑定 #

在Mixitup每次筛选结束后，重新绑定仅可见的元素，确保Fancybox的相册集合始终是最新的：

// 初始化Mixitup（替换成你的容器选择器和配置）
const mixer = mixitup('.your-collection-container', {
  // 你的Mixitup配置项，比如动画、筛选规则等
});

// 页面加载完成后，先绑定初始可见元素
document.addEventListener('DOMContentLoaded', () => {
  bindFancyboxToVisible();
});

// 监听Mixitup筛选完成事件，更新Fancybox绑定
mixer.on('mixEnd', () => {
  bindFancyboxToVisible();
});

// 封装绑定逻辑
function bindFancyboxToVisible() {
  // 先解绑之前的所有Fancybox绑定
  Fancybox.unbind('[data-fancybox="gallery"]');
  // 仅绑定当前可见的元素
  Fancybox.bind('.lightbox-link:not(:hidden)', {
    group: 'gallery'
  });
}

注意事项 #

• 确保.lightbox-link是你缩略图链接的正确类名，替换成实际项目中的选择器
• 如果使用方法1，需要移除之前的Fancybox.bind('[data-fancybox="gallery"]')代码，避免冲突
• 方法2中，mixEnd是Mixitup的官方事件，确保你的Mixitup版本支持该事件（v3及以上版本都支持）

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