jQuery Isotope filtering with 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:

Website

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.

I don't know how I could solve this.

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?

回答1:

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

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.

回答2:

I tried doing it the way ellenmva explained, but couldn't get it to work. I ended up removing the $('#isotopegallery').isotope({ filter: selector }, function() part. So what I was left with was:

$('.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;
});

That seemed to do the trick, it now works just fine.