FancyBox – A jquery image gallery plugin

There are a lot of javascript image galleries out there which you may want to use on your website. I am an avid fan of jQuery – so when I stumbled upon a Jquery plugin called FancyBox I was instantly taken. Its a pretty simple plugin that uses basic lightbox technology, but its got a really well rounded finnish which will enhance any page it is placed on.

Now this plugin does have some documentation, but I thought i would try to simplify it for the more design focused readers out there.

Step 1 – Download It

Download the latest stable release of the plugn

Step 2 – Plug It In

once you have downloaded the plugin you will want to upload it to you server. For this to work you will also need a copy of jquery, which you can download from jquery.com

Step 3 – Include It

Its important that when you call the files in you call jquery before you call ‘jquery.fancybox.js’ as it will only work if you call in the framework first. So it should look like this:

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.fancybox.js" type="text/javascript"></script>

Step 4 – Use It

Now comes the fun part, take your thumbnail version of the image and place it in a link to its bigger brother.

Step 5 – Activate it

To activate the plugin simply call it, if you want to control a few additional features you can control these in the plugin call:

$(function() {
$("p#test3 a").fancybox({
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});

And that’s all there is to it, so in 5 very simple steps you can have your own awesome image gallery