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

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
March 6th, 2011
Any way to include this as a plugin with the Smarty engine?
« Reply