Fancybox图库导航不起作用

时间:2017-10-12 18:26:03

标签: jquery wordpress fancybox gallery fancybox-3

我在多个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默认媒体库短代码生成图库。

这是我的fancybox电话:

<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版本问题吗?

1 个答案:

答案 0 :(得分:3)

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

例如:

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

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