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 enahchance 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 relese of the plugn

Step 2 – Plug It In

once you have downloaded the plugin you will want to uplaod 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>
<link href="/css/fancybox.css" rel="stylesheet" type="text/css" />

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, this should look something like this;

<a href="big_image.jpg"><img src="small_image.jpg" /></a>

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 thats all there is to it, so in 5 very simple steps you can have your own awesome image gallery