Using fancybox to display a gallery from a javascript array

I have been experimenting with a few javascript gallery libraries recently and most of them have major defects one way or another. After a long list of experiements, i dediced for fancybox which has all the options i need and works on top of jQuery (which i use anyway).

The one big problem i still had was how to make it display a gallery of many items, that are not references with HTML tags. So, fine, the normal way is great. Still what i wanted was to display a gallery of e.g. 20 items, while i only showed a preview of 6 on the screen.

I thought about all crazy things as i could not find any docs on how to make this work with fancybox until i came across a post on googledocs. In fact the solution was rater simple, there is actually a (undocumented) way to pass images in the form of an array:

<a href=”#” id=”mod_gallery”>Gallery</a>

$(“#mod_gallery”).click(function() {




        ‘padding’: 0,
        ‘transitionIn’: ‘elastic’,
        ‘transitionOut’: ‘elastic’,
        ‘type’ : ‘image’,
        ‘changeFade’ : 0,
        ‘overlayOpacity’: 0.8,
        ‘overlayColor’: ‘#000000’