Dynamic Drive DHTML Scripts- Image Thumbnail Viewer II

Home Image Effects Image Galleries and Viewers Here

Image Thumbnail Viewer II

Author: Dynamic Drive

Note: Script updated Feb 5th, 07' for various improvements.

Description: Similar in function to Image Thumbnail Viewer, this script loads and displays a larger image when a thumbnail is clicked on. Great for letting visitors preview from many images then select the image of his choice to view on the same page. Features include:

Unobtrusive design, easy set up- just add to thumbnail links on your page a "rel" and "rev' attribute. That's it.
Configure larger image to be shown via "click" or "mouseover" of thumbnail.
Enlarged image can be optionally hyperlinked.
If enlarged image is set to be shown "mouseover", it is automatically preloaded for faster display.
Specify whether the "title" attribute of the thumbnail links should be shown as description text underneath the enlarged image.
Define multiple regions for different images to be displayed in.
In IE5.5+, an optional fade-wipe effect is applied during each image change.

Yes, deceptively loaded!

Demos:

Using conventional thumbnail images and activated "mouseover":

Using text links and activated "click":

-Alarm clock
-Dice
-Lightbulb

Directions

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

The code references an external .js file, which you should download below:

thumbnailviewer2.js (Two optional variables to configure within)

Step 2: Add the following sample code to the <BODY> section of your page. It illustrates how to set up thumbnails to display their larger counterparts:

Select All
<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a><br /> <a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail Example 2</a><br /> <a href="http://www.nasa.gov/images/content/166615main_image_feature_733_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 3 (click)</a><br /> <a href="http://www.nasa.gov/images/content/168291main_image_feature_750_ys_4.jpg" rel="enlargeimage::click" rev="loadarea2">Thumbnail Example 4 (click)</a><br /><br /> <div id="loadarea" style="width: 600px"></div> <h2 /> <div id="loadarea2" style="width: 550px"></div>

As shown, a thumbnail link looks something like this:

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea">Thumbnail</a>

Set the "href" attribute to the full URL to the enlarged image. Then, use the "rel" attribute to donate this link as a thumbnail link and how the enlarged image should be launched:

rel="enlargeimage::mouseover"

The two valid values for text following the delimiter (::) are "mouseover" or "click".

Moving on, use the "rev" attribute to specify within which container (ie: a DIV) the enlarged image should be shown, and optionally, the URL this image should be hyperlinked to:

rev="loadarea"

In the above case, you're telling the script to load the enlarged image in the DIV (or some other element) on the page with ID="loadarea". Obviously remember to actually give this DIV such an ID declaration. If you want the enlarged image to be hyperlinked, extend the above declaration a delimiter (::) followed by the desired URL:

rev="loadarea::http://www.dynamicdrive.com"

This causes the image to be linked to the specified URL.

Finally, in IE5.5+, an optional fading transition can be applied to the enlarged image when it's shown. Note however, in order for this feature to work, the container on your page showing the enlarged image must have an explicit width (and ideally height) declared. For example:

<div id="loadarea" style="width: 500px">
This DIV will show my enlarged images!
</div>

This is simply a requirement of using IE's transition effects.