jQuery Isotope filtering with Fancybox

Question

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

Answer 1

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.

Answer 2

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.