浏览图像

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属性的画廊：

注 - 画廊是从谁具有相同的 “相对” 的标签，例如元素创建：

/* 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();