Question

我使用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>

我不希望能够从＆＃34; img1＆＃34;到＆＃34; img2＆＃34;，怎么做？

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

Answer 1

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

注意 - 图库是根据具有相同＆＃34; rel＆＃34;的元素创建的。标签，例如：

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

浏览图片

1 个答案: