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
"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:
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!