Use Jquery Isotope to filter Fancybox gallery

Question

I'm trying to use Isotope to filter my gallery down to categories and then open up FancyBox and only have the filtered categories be presented in Fancybox.

Here is my code:

HTML

<div class="filters">
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="color">
      <button class="button" data-filter="*">ALL</button>|
      <button class="button" data-filter=".wedding">WEDDINGS</button>|
      <button class="button" data-filter=".concert">CONCERT/SHOWS</button>|
      <button class="button" data-filter=".corporate">CORPORATE EVENTS</button>|
      <button class="button" data-filter=".church">CHURCH EVENTS</button>|
      <button class="button" data-filter=".political">POLITICAL EVENTS</button>|
      <button class="button" data-filter=".parties">PARTIES</button>
    </div>
  </div>
</div>
    </div>
    <!-- /.container -->
<div class="grid">
<div class="gutter-sizer"></div>
    <a class='fancybox' href='../images/picture-1' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='church'>
        <div class="grid-item church"><img src="../images/picture-1"></div>
    </a>

    <a class='fancybox' href='../images/picture-2' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='wedding'>
        <div class="grid-item wedding"><img src="../images/picture-2"></div>
    </a>

    <a class='fancybox' href='../images/picture-' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='church'>
        <div class="grid-item church"><img  src="../images/picture-3"></div>
    </a>
</div>

JS

    $(".fancybox").fancybox({

    });
        $('#filters a').click(function(){
              var selector = $(this).attr('data-filter');
          $('#gallery').isotope({ filter: selector }, function(){
            if(selector == "*"){
             $(".fancybox").attr("data-fancybox-group", "gallery");
            } else{ 
             $(selector).find(".fancybox").attr("data-fancybox-group", selector);
            }
          });
          return false;
        });
}); // ready

Answer 1

You can simply create custom click event to display visible items:

$('.fancybox').on('click', function() {
  var visibleLinks = $('.fancybox:visible');

  $.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );

  return false;
});

See full demo - http://codepen.io/fancyapps/pen/EZKYPN

(this demo uses v3, but it would be similar for v2, too)