Creating multiple Fancybox galleries on the same page

Just assign a different rel attribute to each gallery.

<a class=”fancybox” rel=”gallery01″ href=”product01/image01.jpg”>one</a>
<a class=”fancybox” rel=”gallery01″ href=”product01/image02.jpg”>one</a>
<a class=”fancybox” rel=”gallery01″ href=”product01/image03.jpg”>one</a>
<a class=”fancybox” rel=”gallery01″ href=”product01/image04.jpg”>one</a>

<a class=”fancybox” rel=”gallery02″ href=”product02/image01.jpg”>two</a>
<a class=”fancybox” rel=”gallery02″ href=”product02/image02.jpg”>two</a>
<a class=”fancybox” rel=”gallery02″ href=”product02/image03.jpg”>two</a>

<a class=”fancybox” rel=”gallery03″ href=”product03/image01.jpg”>three</a>
<a class=”fancybox” rel=”gallery03″ href=”product03/image02.jpg”>three</a>
<a class=”fancybox” rel=”gallery03″ href=”product03/image03.jpg”>three</a>

… and they all can use the same script:

$(“.fancybox”).fancybox({
‘transitionIn’      : ‘none’,
‘transitionOut’     : ‘none’,
‘titlePosition’     : ‘over’,
‘cyclic’            : true,
‘titleFormat’       : function(title, currentArray, currentIndex, currentOpts) {
return ‘<span id=”fancybox-title-over”>Image ‘ +  (currentIndex + 1) + ‘ / ‘ + currentArray.length + ‘ ‘ + title + ‘</span>’;
}
});