Question

我有很独特的情况。这是我的场景：我的页面有几张图片，每张图片都会启动一个fancybox图库。我想通过点击照片并在导航栏中的单独链接访问每个图库。到目前为止，我已经看到一个示例，允许您使用“onclick”事件设置导航，这非常有用，但是，我希望对此进行扩展，并且能够让我的导航中的每个链接都能够访问不同的图库从那些照片。我知道如何在fancybox中使用此功能的唯一方法是使用“rel”属性，但我不知道如何将其连接到我的onclick事件中。任何帮助将不胜感激。

这是我当前html的片段，但是，我再次只能访问第一个库，我希望能够设计我的onclick事件，以便我可以告诉它我想访问哪个库。

 onclick="$('.gallery').eq(0).trigger('click'); return false;

上面的onclick允许我访问'rel =“group2”'图库，但我需要每个链接访问不同的'rel =“组＃”'

</div>
<div>
    <a class="gallery" rel='group3' href="Pictures/FinalPhotos/GG.jpg">
    <img src="Pictures/FinalPhotos/GG.jpg"class="pictures4"  alt="deck"></a>
    <a class="gallery" rel='group3' href="Pictures/DDC/IMG_5577-Rendering.jpg"></a>
    <a class="gallery" rel='group3' href="Pictures/atriumdarkps.jpg"></a>
</div>

Answer 1

您可以通过单独的链接访问每个图库（直接进入href没有onclick属性）：

<a href="javascript:$('[rel=group1]').eq(0).trigger('click'); return false;">access group 1</a>
<a href="javascript:$('[rel=group2]').eq(0).trigger('click'); return false;">access group 2</a>
<a href="javascript:$('[rel=group3]').eq(0).trigger('click'); return false;">access group 3</a>

......等等。

由于所有元素共享同一个类gallery（但属性不同rel），因此您可以为所有元素使用单个脚本

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

参见 JSFIDDLE

如何从导航中访问我的所有fancybox画廊？

1 个答案: