Fancybox 画廊导航不起作用答案

【问题标题】：Fancybox Gallery Navigation Not WorkingFancybox 画廊导航不起作用
【发布时间】：2018-03-24 19:10:14
【问题描述】：

我在多个 WordPress 网站上使用 Fancybox 制作照片库。

自从升级到最新的 Fancybox 代码后，我遇到了 Fancybox 画廊导航无法正常工作的问题。

照片完美打开，但没有链接在一起。

这是我在头脑中使用的简单代码：

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>

画廊是使用 WordPress 默认媒体画廊短代码生成的。

这是我的幻想电话：

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".gallery-icon a").fancybox({ 
        animationEffect : 'fade'
    }).attr('rel', 'group1');
});
</script>

如您所见，我正在尝试将 rel="group1" 分配给链接。我也试过属性“data-fancybox-group”。

两者都不起作用。

这是链接：

Demo Website

关于如何显示导航按钮并将这些照片链接为画廊的任何想法？

会不会是 jQuery 版本的问题？

【问题讨论】：

您是否尝试过联系 Fancybox 支持？如果版本之间存在兼容性问题，他们最清楚。

标签： jquery wordpress fancybox gallery fancybox-3

【解决方案1】：

图库是通过添加相同的data-fancybox 属性值来创建的。

例如：

$(".gallery-icon a").fancybox({ 
  animationEffect : 'fade'
}).attr('data-fancybox', 'group1');

演示 - https://codepen.io/anon/pen/EwpOxE?editors=1010

【讨论】：