I'm trying to make my application of fancybox 2 as efficient as possible ...
At the moment, i have this HTML markup:
<a class="fancybox" href="cont/intra_1.jpg" data-fancybox-group="dd-intrascan-gal" title="Zfx Intrascan"><img src="cont/intra_1.jpg" alt="" /></a>
<a class="fancybox" href="cont/intra_2.jpg" data-fancybox-group="dd-intrascan-gal" title="Zfx Intrascan"><img src="cont/intra_2.jpg" alt="" /></a>
<a class="fancybox" href="cont/intra_3.jpg" data-fancybox-group="dd-intrascan-gal" title="Zfx Intrascan"><img src="cont/intra_3.jpg" alt="" /></a>
<a class="fancybox" href="cont/intra_4.jpg" data-fancybox-group="dd-intrascan-gal" title="Zfx Intrascan"><img src="cont/intra_4.jpg" alt="" /></a>
<a class="fancybox" href="cont/intra_5.jpg" data-fancybox-group="dd-intrascan-gal" title="Zfx Intrascan"><img src="cont/intra_5.jpg" alt="" /></a>
which is quite lengthy and references the same image twice, once for thumbnails scaled down by CSS, once for the full image (this makes sense as it is an offline prensentation tool).
I then apply this JS to it (i shortened the configuration as it has no specific relevance to the question):
$('.fancybox')
.fancybox({
helpers : { title : { type : 'over' } }
}
});
This opens a fancybox popup where i can slide through all images within the "dd-intrascan-gal" group.
What i'd like to do is kind of this markup:
<img class="fancybox" src="cont/intra_1.jpg" rel="dd-intrascan-gal" title="foo">
<img class="fancybox" src="cont/intra_2.jpg" rel="dd-intrascan-gal" title="foo">
<img class="fancybox" src="cont/intra_2.jpg" rel="dd-intrascan-gal" title="foo">
<img class="fancybox" src="cont/intra_2.jpg" rel="dd-intrascan-gal" title="foo">
and do the rest by some kind of function or built in option of fancybox 2 ... There is the option of writing a specific function and run it before initialising fancybox, but maybe there is a more easy option built in that i'm not able to find?