Навигация по изображениям

Question

Я использую fancyBox, где вы обертываете изображения в <a> s, и когда вы нажимаете на них, они будут увеличиваться. Тем не менее, кажется, что вы также можете перейти к предыдущему следующему изображению. В моем приложении у меня есть панели, поэтому я хотел бы иметь возможность перейти к изображениям первой панели, но я делаю не хочу, чтобы иметь возможность перейти от последнего изображения 1-й панели к первому изображению вторая панель.

Есть ли способ сделать это?

<!-- 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, вы должны группировать галереи с атрибутом отн:

Примечание - Галереи создаются из элементов, которые имеют тот же «отн» тег, пример:

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