当有两个锚点在同一页面上打开带有花式框的同一个画廊时，如何防止显示相同的图像? [英] How to prevent showing same image when there are two anchors opening the same gallery with fancy box on same page?

问题描述

我有一个页面，其中有两种方法可以打开在fancybox 2中打开的图像/视频库.

I have a page that has two ways to open a gallery of images/videos that open in fancybox 2.

问题在于，因为有两个链接用第一张图片打开图库的开头，所以第一张图片在图库中显示两次.

The problem is that because there are two links that open the start of the gallery with the first image, the first image is displayed twice in the gallery.

这是我的示例 http://www.londonsitedesign.co.uk/test.html

如何防止第一张图片在画廊中显示两次?

How can I prevent the first image being displayed twice in the gallery?

推荐答案

如果第一个链接仅启动fancybox画廊，则它不需要具有fancybox class (两者都不例如href属性)

If the first link will only start the fancybox gallery, then it doesn't need to have the fancybox class (neither an href attribute for instance)

您实际上可以为其使用其他 class (例如fancyboxLauncher)

You could actually use a different class for it (e.g. fancyboxLauncher)

<a class="fancyboxLauncher" href="#" rel="falling">Slideshow</a>

...，并像这样将click事件绑定到它:

... and bind a click event to it like :

$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});

...请注意，我们使用了.eq(0)方法从第一个项目触发图库，否则它将从最后一个项目开始.另请注意，.on()需要jQuery v1.7 +

... notice that we used the method .eq(0) to fire the gallery from the first item, otherwise it will start from the last. Also notice that .on() requires jQuery v1.7+

对于fancybox画廊，您仍然需要此代码

You still need to have this code for the fancybox gallery

$(".fancybox").fancybox({
    // API options here
});

检查 JSFIDDLE

Check JSFIDDLE

这篇关于当有两个锚点在同一页面上打开带有花式框的同一个画廊时，如何防止显示相同的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！