Question

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

Website

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

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

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

我真的无法理解这一点。你有什么想法怎么做？

Answer 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;
        });

这一切都在过滤按钮中。如果你无法使用它，请分享你的代码。

Answer 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;
});

这似乎可以解决问题，它现在可以正常工作。

使用Fancybox进行jQuery同位素过滤

2 个答案: