使用Jquery同位素过滤Fancybox画廊 [英] Use Jquery Isotope to filter Fancybox gallery

问题描述

我正在尝试使用同位素将我的画廊按类别筛选，然后打开FancyBox，只有在Fancybox中显示经过筛选的类别.

I'm trying to use Isotope to filter my gallery down to categories and then open up FancyBox and only have the filtered categories be presented in 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

推荐答案

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

You can simply create custom click event to display visible items:

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

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

  return false;
});

查看完整的演示- http://codepen.io/fancyapps/pen/EZKYPN

(此演示使用v3，但v2也是如此)

(this demo uses v3, but it would be similar for v2, too)

这篇关于使用Jquery同位素过滤Fancybox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！