how to use jQuery Isotope to filter jQuery Fancybox gallery - fancybox

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.