How can I use fancybox together with filterizr so that only filtered items are in image gallery?

Question

When I use filerizr with fancybox it shows all images in the gallery instead of only the filtered images. I tried using the the visible selector to only show visible items but it doesn't work. Could someone help me to find a solution. I know filterizr adds a class to all filtered elements called filteredout but i dont know how i could use this class to my advantage for fancybox

Example :https://www.mealfixer.com/index1.php

Code:
var filterizd = $('.filtr-container').filterizr({
    
});


$().fancybox({
  selector : '.shown:visible > a'
})

Answer 1

First, you can easily check if you are using correct selector. Simply, click on the link so that only two items are visible. Then open console and run $('.shown:visible > a').length - it returns 6 (because there are 6 links initially). Obviously, this is the reason why fancyBox shows all of them.

While inspecting your links, I noticed that they all have shown class name applied, but the hidden ones have filteredOut.

Try this:

$().fancybox({
  selector : '.shown:not(.filteredOut) > a'
})