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












September 25th, 2008
good site
« Reply
January 30th, 2009
where do you put the call?
« Reply
February 2nd, 2009
Hi Jose. You wanna put the call in a script tag, which must be called after you have pulled in the jquery files, in the head of the document. I hope that makes sense! Thanks for reading.
« Reply