1

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

网站

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

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

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

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

4

2 回答 2

4

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

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

于 2013-01-19T15:55:04.567 回答
0

我尝试按照 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;
});

这似乎起到了作用，现在它工作得很好。

于 2015-09-04T10:41:16.107 回答