Bookmark to del.icio.us
FF1+ IE5+ Opr7+
Image Thumbnail Viewer
Note: June 27th, 11'- Fixed minor IE9 bug (.js file updated).
Description: Image Thumbnail Viewer is a
compact, unobtrusive image viewer that can be applied to any link on the
page to load the desired image inside a sleek interface based on the link's
This script will center the enlarged image on the page and
optionally display a text description based on the activating link's
Step 1: Add the following to the <head> section of your page:
The code references three files, which you should download below:
Step 2: Add the below sample HTML to your page, which shows setting up the script on a regular link and a thumbnail image link:
That's it for installation!
As mentioned in the intro, to use this script, just give the
link on the page a
<a href="castle.gif" rel="thumbnail" title="This is beautiful castle for sale!">Castle</a>
Finally, you should know that many aspects of this script can be customized. Take a look at the top of thumbnailviewer.js for what you can change:
//Inside thumbnailviewer.js enableTitle: true, //Should "title" attribute of link be used as description? enableAnimation: true, //Enable fading animation? definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
Now go show off your images!