how to use jQuery Isotope to filter jQuery Fancybox gallery

Question

I use FancyBox and Isotope on my personnal gallery website and I discover that FancyBox shows all pictures even if they are filtered by isotope.

I have a look on different solutions:

jQuery Isotope filtering with Fancybox

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

but no one works for me.

In my case, I have a js file to configure FancyBox, and FancyBox may be used without isotope, in other part of my gallery:

$(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,
		},
	});
});

my html and js code is a following

<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>

what can I do to dynamicaly configure FancyBox ot display only displayed pictures filtered by Isotope?

you can see my website and my issue in action here http://www.vincentbourganel.fr/fetes-des-lumieres-de-lyon/

Thanks for your help.

Answer 1

Tweak your selector so it returns only visible items, example:

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

You can use any valid jQuery selector here.