使用Isotope与Lightbox2时，如何按筛选结果更新Lightbox相册？

核心思路 #

Lightbox2默认会在页面加载时收集所有带data-lightbox属性的元素作为相册内容，而Isotope的筛选只是通过CSS隐藏元素，并未从DOM中移除，因此Lightbox仍会读取全部元素。解决关键是每次筛选完成后，重新收集当前可见的图片元素，手动控制Lightbox的相册列表。

具体实现步骤 #

1. 禁用Lightbox自动初始化
   移除所有图片上的data-lightbox属性，避免Lightbox自动绑定。同时在页面加载后取消其默认的文档点击监听：

   document.addEventListener('DOMContentLoaded', function() {
     // 取消Lightbox默认的全局点击监听
     if (Lightbox._handleDocumentClick) {
       document.removeEventListener('click', Lightbox._handleDocumentClick);
     }
   });
   

2. 初始化Isotope并监听筛选完成事件
   初始化Isotope时，监听arrangeComplete事件（筛选/排序完成后触发），在回调中重新绑定可见图片的点击事件：

   // 初始化Isotope实例
   const iso = new Isotope('.grid', {
     itemSelector: '.grid-item',
     layoutMode: 'fitRows'
   });
   
   // 筛选完成后更新Lightbox绑定
   iso.on('arrangeComplete', function() {
     // 移除旧的点击事件，避免重复绑定
     document.querySelectorAll('.grid-item img').forEach(img => {
       img.removeEventListener('click', handleImageClick);
     });
     // 给当前可见的图片绑定新的点击事件
     const visibleImgs = iso.filteredItems.map(item => item.element.querySelector('img'));
     visibleImgs.forEach(img => {
       img.addEventListener('click', handleImageClick);
     });
   });
   

3. 手动构建相册并调用Lightbox
   编写点击事件处理函数，收集当前可见图片的资源信息，构建符合Lightbox要求的相册数组，再手动调用打开方法：

   function handleImageClick(e) {
     e.preventDefault();
     // 构建当前可见图片的相册数据
     const albumItems = iso.filteredItems.map(item => {
       const img = item.element.querySelector('img');
       return {
         src: img.getAttribute('data-src') || img.src,
         title: img.getAttribute('data-title') || ''
       };
     });
     // 找到当前点击图片在相册中的索引
     const currentIndex = albumItems.findIndex(item => 
       item.src === (e.target.getAttribute('data-src') || e.target.src)
     );
     // 调用Lightbox打开指定相册和图片
     Lightbox.open({
       items: albumItems,
       index: currentIndex
     });
   }
   

4. 绑定筛选按钮事件
   确保筛选按钮点击时触发Isotope的筛选逻辑：

   document.querySelectorAll('.filter-button-group button').forEach(btn => {
     btn.addEventListener('click', function() {
       const filterValue = this.getAttribute('data-filter');
       iso.arrange({ filter: filterValue });
     });
   });
   

注意事项 #

• 图片元素建议添加data-src（高清图地址）和data-title（图片标题）属性，若无需高清图可直接使用src属性。
• 每次筛选后必须移除旧的点击事件，防止重复绑定导致多次触发Lightbox。
• 依赖Isotope的filteredItems属性获取可见元素，确保该属性能正确返回筛选后的结果。

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