我如何将 fancybox 与 filterizr 一起使用，以便只有过滤后的项目才会出现在图片库中？

Question

当我将 filerizr 与 fancybox 一起使用时，它会显示图库中的所有图像，而不仅仅是过滤后的图像。我尝试使用可见选择器仅显示可见项目，但它不起作用。有人可以帮我找到解决方案。我知道 filterizr 添加了一个 class 到所有过滤后的元素，称为 filteredout 但我不知道如何使用这个 class 对 fancybox

有利

示例：https://www.mealfixer.com/index1.php

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


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

Answer 1

首先，您可以轻松检查您是否使用了正确的选择器。只需单击 link，以便只有两个项目可见。然后打开控制台和运行 $('.shown:visible > a').length - 它 returns 6（因为最初有 6 个 link）。很显然，这就是为什么fancyBox会全部显示出来的原因。

在检查您的 link 时，我注意到它们都应用了 shown class 名称，但隐藏的应用了 filteredOut。

试试这个：

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

我如何将 fancybox 与 filterizr 一起使用，以便只有过滤后的项目才会出现在图片库中？

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

javascript

jquery

fancybox

jquery-isotope