Fancybox到相同画廊的多个链接，无需重复 [英] Fancybox multiple links to same gallery without duplication

问题描述

因此，我有一个图库图库，以及一些指向它的链接.像这样的东西

So I have a gallery of images, and a few links to it. Something like that

<a href="/images/1.jpg" rel="1">title</a>
<a href="/images/1.jpg" rel="1">link to first image</a>
<a href="/images/2.jpg" rel="1">link to second image</a>
<a href="/images/3.jpg" rel="1">link to third image</a>

这是导致第一张图像在fancybox中重复的原因.像这样: http://filebeam.com/2dec41a1820f2525f040424578c4421c.jpg

This is cause first image to duplicate in fancybox. Like this: http://filebeam.com/2dec41a1820f2525f040424578c4421c.jpg

如何在不重复的情况下建立指向同一对象的多个链接?

How can I make a multiple links to the same object without duplications?

推荐答案

如果所有链接都是可见且可单击的，那么您可以为第一个创建自定义点击处理程序，从而从其余部分打开fancyBox画廊-

If all links are visible and clickable, then you could create a custom click handler for the first one that opens fancyBox gallery from the rest -

<a data-trigger-rel="gallery" class="fancybox-trigger" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<br />
<br />

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

$(".fancybox-trigger").click(function() {

    $("a[rel='" + $(this).data('trigger-rel') + "']").eq(0).trigger('click');

    return false;

});


$(".fancybox").fancybox();

查看实际情况- http://jsfiddle.net/g9R4H/

这篇关于Fancybox到相同画廊的多个链接，无需重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！