2017-03-03 88 views
0

我想用同位素过滤我的画廊到类别,然后打开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> 

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 
+0

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

+0

@JFK谢谢回复。我怎样才能使这个代码与多个过滤器? – Capwiz

回答

1

你可以简单地创建自定义的点击事件显示的可见项:

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

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

    return false; 
}); 

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

(本演示使用V3,但是这将是V2类似,太)

+0

这工作。谢谢!! – Capwiz