浏览图像[重复]答案

【问题标题】：Navigating through images [duplicate]浏览图像[重复]
【发布时间】：2016-09-02 20:01:18
【问题描述】：

我使用fancyBox，您将图像包裹在<a>s 中，当您点击它们时，它们会放大。但是，您似乎也可以导航到上一个-下一个图像。在我的应用程序中，我有面板，所以我希望能够导航到第一个面板的图像，但我确实不希望能够从第一个面板的最后一个图像导航到第二个面板的第一张图片。

有没有办法做到这一点？

<!-- in the first panel -->
<a class="fancybox" rel="group" href="img0"><img src="img0"/></a>
<a class="fancybox" rel="group" href="img1"><img src="img1"/></a>

<!-- in the second panel -->
<a class="fancybox" rel="group" href="img2"><img src="img2"/></a>
<a class="fancybox" rel="group" href="img3"><img src="img3"/></a>

我不想从“img1”导航到“img2”，该怎么做？

我认为rel 会有所帮助，但在第二个面板中将其设置为随机名称似乎并没有成功！

【问题讨论】：

标签： jquery html image fancybox fancybox-2

【解决方案1】：

从 Fancbox website，您应该使用 rel 属性对您的画廊进行分组：

注意 - 画廊是由具有相同“rel”标签的元素创建的，例如：

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>   

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

$("a.grouped_elements").fancybox();

【讨论】：