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 "href" value. Simply give the link in question- be it a text link or image thumbnail link- a rel attribute of "thumbnail", and you're done.
This script will center the enlarged image on the page and optionally display a text description based on the activating link's "title" attribute. A fading effect can be turned on/off to bring the final image into view.
Demos:
- Tranquil Streets
- Corn against dawn
Directions 
Step 1: Add the following to the <head> section of your page:
The code references three files, which you should download below:
- thumbnailviewer.css
- thumbnailviewer.js
- loading.gif (used by the "loading" div message)
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 rel="thumbnail" declaration, with the "href" pointing to the URL to the enlarged image. If the link contains a "title" attribute, its value will be used as the image's description:
<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!
discuss this topic to forum
