使用Fancybox进行jQuery同位素过滤

问题描述

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

I made a Website with a Imagegallery, who is able of beeing filtered with jQuery Isotope.You can click on the thumbnails and then cycle trough the images with the fancybox plugin:

现在的事情是，当Imagegallery被过滤时，fancybox插件仍会循环遍历所有图像。即使是那些在应用过滤器时未显示的人。

Now the thing is, When the Imagegallery is beeing filtered, the fancybox plugin still cycles trough all the images. Even the ones who are not showing up when the filter is applied.

我不知道该如何解决。

Fancybox用 rel = gallery 确定一个画廊。同位素决定了css类的过滤效果。因此，如果我将过滤css类广告到 rel = 标签（同位素过滤类由cms生成），我将无法循环遍历所有显示所有内容时显示图像。

Fancybox determens a gallery with rel="gallery". Isotope determines the filtering effect trough the css class. So if I ad the filtering css class to the rel="" tag (the isotope filtering classes are generated by the cms) I'm no longer able to cycle trough all the images, when everything is displayed.

我真的无法解决这个问题。您有任何想法怎么做吗？

I really can't get my head around this. Do you have any Idea how to do this?

推荐答案

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

It would help to have some code. However, I can show you how I got fancybox to work with the filtered images.

我不是在使用rel = gallery，而是在data-fancybox-group = gallery中使用。 .fancybox是我正在调用fancybox的类，带有用于同位素的过滤器字符串。

I'm not using rel=gallery but rather data-fancybox-group=gallery. .fancybox is the class I'm calling fancybox on with the filter string for isotope.

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

全部在过滤器按钮中。如果无法正常工作，请共享您的代码。

It's all in the filter buttons. Share your code if you can't get it to work.

这篇关于使用Fancybox进行jQuery同位素过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！