使用 Jquery 同位素筛选 Fancybox 图库

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 同位素筛选 Fancybox 图库

Use Jquery Isotope to filter Fancybox gallery

javascript

jquery

html

fancybox

jquery-isotope