New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE5+ Opr7+

Image Thumbnail Viewer

Author: Dynamic Drive

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:

Directions Developer's View

Step 1: Add the following to the <head> section of your page:

Select All

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:

Select All

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!