Author:
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:
Beautiful baby
Step 1: Add the following to the <head> section of your page:
<link rel="stylesheet" href="http://sites.google.com/site/warehackproject/thumbnailviewer.css" type="text/css" />
<script src="http://sites.google.com/site/warehackproject/thumbnailviewer.js" type="text/javascript"></script>
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:
<p><a href="PASTE YOUR IMAGE LINK HERE" rel="thumbnail" title="YOUR DESCRIPTION">YOUR IMAGE TITLE</a></p>
<p><a href="PASTE YOUR IMAGE LINK HERE"" rel="thumbnail"><img src="PASTE YOUR IMAGE LINK HERE" style="width: 50px; height: 50px" /></a></p>
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>
Now go show off your images!
Subscribe to:
Post Comments (Atom)
0 comments for this post