如何使用jQuery Isotope来过滤jQuery Fancybox gallery

Question

我在我的个人画廊网站上使用 FancyBox 和 Isotope，我发现 FancyBox 显示所有图片，即使它们被同位素过滤。

我看看不同的解决方案：

jQuery Isotope filtering with Fancybox

How to only show filtered images in fancybox when using isotope filters and multiple filters?

但是没有人为我工作。

在我的例子中，我有一个 js 文件来配置 FancyBox，FancyBox 可以在没有同位素的情况下使用，在我的画廊的其他部分：

$(document).ready( function() {
 $().fancybox({
  selector : '[data-fancybox="images"]',
  loop : true,
  margin : [20, 0],
  buttons : [
   'thumbs',
   'slideShow',
   'close'
  ],
  protect : true,
  animationEffect : 'fade',
  touch : {
   vertical : false
  },
  slideShow : {
   autoStart : false,
   speed : 3000
  },
  clickContent : function( current, event ) {
   return current.type === 'image' ? 'toggleControls' : false;
  },
  clickSlide : false,
  clickOutside : false,
  dblclickContent : function( current, event ) {
   return current.type === 'image' ? 'next' : false;
  },
  caption : function( instance, item ) {
   if ($(this).find('.caption').length) {
    return $(this).find('.caption').html();
   } else {
    return $(this).attr('title');
   };
  },
  mobile : {
   thumbs : false,
   idleTime : 3,
   clickContent : function( current, event ) {
    return current.type === 'image' ? 'toggleControls' : false;
   },
   dblclickContent : function( current, event ) {
    return current.type === 'image' ? 'next' : false;
   },
   dblclickSlide : false,
  },
 });
});

我的html和js代码如下

<div class="pager">
 <div class="btn-group filters-button-group">
  <button class="btn btn-default btn-sm active" data-filter="*">Toutes</button>
  <button class="btn btn-default btn-sm" data-filter=".2010">2010</button>
  <button class="btn btn-default btn-sm" data-filter=".2011">2011</button>
  <button class="btn btn-default btn-sm" data-filter=".2012">2012</button>
 </div>
</div>

<div id="isotope-wrap" class="margin-bottom-double">
 <div class="gutter-sizer"></div>
 <div class="image-item image-item-height2 2010">
  <a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_8743.jpg" title="Cathédrale Saint-Jean / 2012" data-fancybox="images">
   <img src="/cache/fetes-des-lumieres-de-lyon/img_8743_w150_h235_cw150_ch235_thumb.jpg" alt="Cathédrale Saint-Jean / 2012" class="remove-attributes img-responsive" width="150" height="235" />
  </a>
 </div>
 <div class="image-item image-item-width2 2011">
  <a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_2216.jpg" title="Fontaine Bartholdi / 2005" data-fancybox="images">
   <img src="/cache/fetes-des-lumieres-de-lyon/img_2216_w235_h150_cw235_ch150_thumb.jpg" alt="Fontaine Bartholdi / 2005" class="remove-attributes img-responsive" width="235" height="150" />
  </a>
 </div>
 <div class="image-item image-item-height2 2012">
  <a class="thumb" href="/albums/fetes-des-lumieres-de-lyon/img_8709.jpg" title="Cathédrale Saint-Jean / 2012" data-fancybox="images">
   <img src="/cache/fetes-des-lumieres-de-lyon/img_8709_w150_h235_cw150_ch235_thumb.jpg" alt="Cathédrale Saint-Jean / 2012" class="remove-attributes img-responsive" width="150" height="235" />
  </a>
 </div>
 [...]
</div>

<script type="text/javascript">
// init Isotope after all images have loaded
var $containter = $('#isotope-wrap').imagesLoaded( function() {
 $containter.isotope({
  itemSelector: '.image-item',
  layoutMode: 'packery',
  // packery layout
  packery: {
   gutter: '.gutter-sizer',
  }
 });
});

// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
 var filterValue = $(this).attr('data-filter');
 $containter.isotope({ filter: filterValue });
});

// change is-active class on buttons
$('.btn-group').each( function( i, buttonGroup ) {
 var $buttonGroup = $(buttonGroup);
 $buttonGroup.on( 'click', 'button', function() {
  $buttonGroup.find('.active').removeClass('active');
  $(this).addClass('active');
 });
});
</script>

我可以做些什么来动态配置 FancyBox ot 仅显示经 Isotope 过滤的显示图片？

你可以在这里看到我的网站和我的问题http://www.vincentbourganel.fr/fetes-des-lumieres-de-lyon/

感谢您的帮助。

Answer 1

调整您的选择器，使其 returns 仅显示项目，例如：

selector : '.image-item:visible > a'

您可以在此处使用任何有效的 jQuery 选择器。

如何使用jQuery Isotope来过滤jQuery Fancybox gallery

how to use jQuery Isotope to filter jQuery Fancybox gallery

fancybox

jquery-isotope

fancybox-3