如何使用 FANCYBOX 对多个画廊上的图像进行分组？答案

【问题标题】：How to group images on multi galleries with FANCYBOX?如何使用 FANCYBOX 对多个画廊上的图像进行分组？
【发布时间】：2019-03-29 10:30:22
【问题描述】：

如何对画廊进行分组以仅显示同一组中的照片？

现在通过 data-fancybox 获取图像的问题是我有组的动态 id。

fancybox 版本：v3.5.7

<a class="fancyfunc" data-fancybox-group="group_<?=$r['reference_id'];?>"  href="<?=$img['image'];?>"  data-fancybox="images">
   <img class="none" src="<?=$img['image'];?>" />
</a>

$('[data-fancybox="images"]').fancybox({

    margin : [44,0,22,0],
    thumbs : {
        autoStart : true,
        axis      : 'x'
    }
})

【问题讨论】：

这个data-fancybox-group="group_<?=$r['reference_id'];?>" 应该已经可以工作了，只要你正确地将相同的reference_id 传递给相同的组链接。请注意您的 class 属性缺少双引号
但这不起作用 $('[data-fancybox="images"]') 需要定位到 data-fancybox-group
更新了我在发布代码时的错误描述。

标签： javascript jquery fancybox fancybox-2

【解决方案1】：

查看文档 - https://fancyapps.com/fancybox/3/docs/#usage -

[..] 使用相同的属性data-fancybox 值为它们中的每一个创建画廊。

所以，替换

data-fancybox-group="group_<?=$r['reference_id'];?>"

与

data-fancybox="group_<?=$r['reference_id'];?>"

【讨论】：

那么这个静态调用呢？ $('[data-fancybox="group_"]').fancybox({}) 我现在在有效载荷中只得到一张图片
您将点击事件（启动fancybox）应用于与您的选择器匹配的元素（例如，$('[data-fancybox="group_"]') 返回的内容）；组是根据data-fancybox 属性的值创建的。