jQuery的同位素与滤波的fancybox(jQuery Isotope filtering wi

2019-07-18 10:50发布

我做了一个网站,一个Imagegallery,谁能够与jQuery的同位素beeing过滤。 您可以点击缩略图,然后循环槽与插件的fancybox的图像:

网站

现在的问题是,当beeing过滤Imagegallery,插件的fancybox仍然周期低谷的所有图像。 即使谁没有显示应用过滤器时的人。

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

的fancybox determens与画廊rel="gallery" 。 同位素确定的滤波效果槽的CSS类。 所以,如果我的广告过滤CSS类的rel=""标签(同位素过滤类由CMS生成)我不再能周期的波谷的所有图像,显示一切时。

我真的不能让我的头解决这个问题。 你有任何想法如何做到这一点?

Answer 1:

这将有助于有一些代码。 不过,我可以告诉你我是如何得到的fancybox与过滤的图像工作。

我没有使用rel =画廊,而是数据的fancybox组=画廊。 .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;
});

这似乎这样的伎俩,现在工作得很好。



文章来源: jQuery Isotope filtering with Fancybox