Question

我尝试使用Isotope将我的图库过滤到类别，然后打开FancyBox，并且只在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

Answer 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也是如此）

使用Jquery Isotope过滤Fancybox图库

1 个答案: