Verwenden Jquery Isotope zum Filtern Fancybox Galerie

Question

Ich versuche, Isotope zu verwenden, um meine Galerie nach Kategorien zu filtern und dann FancyBox zu öffnen und nur die gefilterten Kategorien in Fancybox dargestellt werden.

Hier ist mein 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

Sie können einfach benutzerdefinierte Ereignis erstellen klicken sichtbaren Elemente anzuzeigen:

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

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

    return false; 
}); 

ansehen Demo - http://codepen.io/fancyapps/pen/EZKYPN

(diese Demo verwendet v3, aber es wäre für v2 auch ähnlich sein)