Create Gallery with jQuery FancyBox

The powerful FancyBox jQuery plug-in, which is easy to use and customize. With just a single line of code, FancyBox creates a spectacular way to present images as part of a portfolio, gallery, or slideshow.

To add a caption to a photo, just supply a title attribute to the <a> tag that links to the large image. For example:

<a href="images/photo.jpg" title="A handsome photo”>

Download the FancyBox files and put them into your site - http://fancybox.net

Getting FancyBox to work requires just a single line of JavaScript.

<script>
$(document).ready(function() {
       $('#gallery a').fancybox();
});
</script>

In above code, we use a jQuery selector ($(‘#gallery a’), for example) to tell FancyBox which links to use: In this example, any <a> tag inside another tag with an ID of gallery becomes part of the FancyBox effect.

Locate the all image link inside the gallery- and add rel=“gallery” so that the HTML looks like this:

<a href="../images/slide1.jpg" rel="gallery">
   <img src="../thumb/slude1_thumbnail.jpg" />
</a> 

The FancyBox plug-in lets you supply custom options that affect the appearance of the light box effect.

For example, to change the background color and opacity of the background placed over the page, you can pass an object literal with your new settings to FancyBox like this:

$('#gallery a').fancybox({
overlayOpacity: .5,
overlayColor: '#F64',
transitionIn: 'elastic',
transitionOut: 'elastic',
});