Programming

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() {

    $.fancybox(

      [

      ],
      {

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

      }

    );

});

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s