浏览图片

Question

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

有办法吗？

<!-- 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 会有所帮助，但在第二个面板中将其设置为随机名称似乎并没有成功！

Answer 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();

浏览图片

Navigating through images

html

jquery

image

fancybox

fancybox-2