使用 Fancybox 进行 jQuery 同位素过滤答案

【问题标题】：jQuery Isotope filtering with Fancybox使用 Fancybox 进行 jQuery 同位素过滤
【发布时间】：2013-01-19 12:07:22
【问题描述】：

我创建了一个带有图片库的网站，该网站可以使用 jQuery Isotope 进行过滤。您可以单击缩略图，然后使用 fancybox 插件循环浏览图像：

Website

现在的问题是，当 Imagegallery 被过滤时，fancybox 插件仍然循环遍历所有图像。即使是那些在应用过滤器时没有出现的人。

我不知道如何解决这个问题。

Fancybox 使用rel="gallery" 确定画廊。同位素决定了css类的过滤效果。因此，如果我将过滤 css 类添加到 rel="" 标记（同位素过滤类由 cms 生成），当显示所有内容时，我将无法再循环浏览所有图像。

我真的无法理解这一点。你有任何想法如何做到这一点？

【问题讨论】：

标签： jquery fancybox jquery-isotope fancybox-2

【解决方案1】：

有一些代码会有所帮助。不过，我可以向您展示我是如何让 fancybox 处理过滤后的图像的。

我没有使用 rel=gallery，而是使用 data-fancybox-group=gallery。 .fancybox 是我用同位素过滤字符串调用fancybox 的类。

// filter buttons
        $('#filters a').click(function(){
              var selector = $(this).attr('data-filter');
          $('#isotopegallery').isotope({ filter: selector }, function(){
            if(selector == "*"){
             $(".fancybox").attr("data-fancybox-group", "gallery");
            } else{ 
             $(selector).find(".fancybox").attr("data-fancybox-group", selector);
            }
          });
          return false;
        });

这一切都在过滤器按钮中。如果您无法使其工作，请分享您的代码。

【讨论】：

是的，我回答了那个问题 HERE，请确保您至少使用 isotope v1.5+
这非常简洁。非常感谢:)

【解决方案2】：

我尝试按照 ellenmva 解释的方式进行操作，但无法正常工作。我最终删除了 $('#isotopegallery').isotope({ filter: selector }, function() 部分。所以我剩下的就是：

$('.filterbutton').on("click", function(){
    var selector = $(this).attr('data-option-value');
    if(selector == "*"){
        $(".fancybox").attr("data-fancybox-group", "gallery");
    } else{ 
        $(selector).find(".fancybox").attr("data-fancybox-group", selector);
    }
   return false;
});

这似乎可以解决问题，现在效果很好。

【讨论】：