使用jquery同位素過濾Fancybox畫廊

我想用同位素過濾我的畫廊到類別，然後打開FancyBox，只有在Fancybox中呈現過濾的類別。使用jquery同位素過濾Fancybox畫廊

這裏是我的代碼：

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>

$(".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

來源

2017-03-03 Capwiz

檢查https://groups.google.com/d/msg/fancybox/ncVsViD2v9o/JE0DHYPuEOgJ是否有幫助 – JFK

@JFK謝謝回覆。我怎樣才能使這個代碼與多個過濾器？ – Capwiz

你可以簡單地創建自定義的點擊事件顯示的可見項：

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

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

    return false; 
});

查看全部演示 - http://codepen.io/fancyapps/pen/EZKYPN

（本演示使用V3，但是這將是V2類似，太）

來源

2017-03-06 09:40:12 Janis

這工作。謝謝！！ – Capwiz

使用jquery同位素過濾Fancybox畫廊

回答

相關問題