如何使用 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 使其仅显示经同位素过滤的图片？

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

感谢您的帮助。

Answer 1

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

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

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