0

I use fancyBox, where you wrap the images in <a>s, and when you click in them, they will enlarge. However, it seems that you can navigate to the previous-next image as well. In my application, I have panels, so I would like to be able to navigate to the images of the first panel, but I do not want to be able to navigate from the last image of the 1st panel to the first image of the 2nd panel.

Is there a way to do this? 

<!-- 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>

I do not want to be able to navigate from "img1" to "img2", how to do this?

I thought rel would help, but setting it to a random name in the second panel didn't seem to make the trick!

gsamaras
  • 71,951
  • 46
  • 188
  • 305

1 Answers1

1

From the Fancbox website, you should group your galleries with the rel attribute:

Note - Galleries are created from elements who have the same "rel" tag, example:

/* 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();
Dranes
  • 156
  • 10