代码之家 › 专栏 › 技术社区 › J.Pillonin

如何将fancybox与filterizr一起使用,以便图像库中仅显示过滤的项目?

jquery-isotope fancybox jquery javascript

J.Pillonin · 技术社区 · 7 年前

当我将FileRizer与fancybox一起使用时,它会显示库中的所有图像,而不仅仅是过滤后的图像。我尝试使用可见选择器仅显示可见项,但它不起作用。有人能帮我找到一个解决办法吗。我知道filterizr向所有过滤元素添加了一个名为filteredout的类,但我不知道如何将这个类用于fancybox

例子: https://www.mealfixer.com/index1.php

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


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

1 回复 | 直到 7 年前

Janis 7 年前

首先,您可以轻松检查是否使用了正确的选择器。只需单击链接,就可以只看到两个项目。然后打开控制台并运行 $('.shown:visible > a').length -它返回6(因为最初有6个链接)。显然,这就是fancyBox显示所有这些内容的原因。

在检查你的链接时,我注意到它们都有 shown 已应用类名,但隐藏的类名 filteredOut .

尝试以下操作:

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

推荐文章

Shaun Taylor · 同位素JS库-卡重叠

7 年前

J.Pillonin · 如何将fancybox与filterizr一起使用,以便图像库中仅显示过滤的项目?

7 年前

vishnu · 同位素垂直标签需要在加载时显示第一项

7 年前

Ebenizer Pinedo · 流星同位素不适用于嵌套模板

7 年前

Kareem Kamal · 如何垂直堆叠图像[复制]

7 年前

Nathe · 同位素-组合按钮和UI滑块不工作

9 年前

Mohamed Rihan · 同位素过滤器复选框和收音机

10 年前

pixeloco · 用同位素单击展开元素

10 年前

dingo_d · 联接多个数组,并仅返回唯一元素jQuery

10 年前

Dan Whiteside · Woocommerce的同位素(负载滞后)

10 年前