使用Fancybox进行jQuery同位素过滤

我制作了一个带有Imagegallery的网站，可以通过jQuery进行过滤。 您可以单击缩略图，然后使用fancybox插件循环浏览图像：

现在的问题是，当Imagegallery被过滤时，fancybox插件仍然在所有图像中循环。即使是应用过滤器时未显示的用户

我不知道怎么才能解决这个问题

Fancybox使用

rel=“gallery”

确定图库。同位素通过css类确定过滤效果。因此，如果我将过滤css类添加到

rel=”“

标记（同位素过滤类由cms生成），当所有内容都显示时，我将无法再循环浏览所有图像

---

我真的无法理解这件事。你知道怎么做吗？

有一些代码会有帮助。不过，我可以向您展示我是如何让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;
        });

---

都在过滤器按钮里。如果您的代码无法正常工作，请与他人共享。

如果您有一些代码，会有所帮助。不过，我可以向您展示我是如何让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;
        });

---

都在过滤器按钮里。如果您的代码无法运行，请与他人共享。

我尝试按照ellenmva解释的方式运行，但无法运行。最后我删除了

$（'#isotoegallery'）。同位素（{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;
});

---

这似乎起到了作用，现在效果很好。

我试着按照ellenmva解释的方式来做，但没有成功。我最终删除了

$（“#isotoegallery”）.同位素（{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;
});

---

这似乎起到了作用，现在效果很好。

是的，我回答了那个问题，只要确保你至少使用了同位素v1.5+，非常简洁。非常感谢：）是的，我回答了那个问题，只要确保你至少使用了同位素v1.5+，非常简洁。非常感谢：）