I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within that specific gallery using the arrow keys.
You can view a demo of this setup here: http://jsfiddle.net/Q6tmq/
My question is how can I customize the functionality so that when the 'up' and 'down' arrow keys are pressed, instead of moving to the next or previous image within the current gallery, it will display the first image from the next or previous gallery?
In essence, I want users to be able to open Fancybox, navigate through all the images in all galleries present on the page without having to close Fancybox each time.
<!-- GALLERY 1 -->
<li>
<!-- THUMB -->
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
<!-- IN-GALLERY IMAGES -->
<div class="hidden">
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
</div>
</li>
<!-- GALLERY 2 -->
<li>
<!-- THUMB -->
<a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/4_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/>
</a>
<!-- IN-GALLERY IMAGES -->
<div class="hidden">
<a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/5_b.jpg"></a>
</div>
</li>
$(".fancybox")
.fancybox({
helpers : {
title : {
type : 'over'
},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.7)'
}
}
}
});