如何使用jQuery Isotope过滤jQuery Fancybox库

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

调整选择器，使其仅返回可见项目，例如：

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

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