Dynamic Drive DHTML Scripts- Image Thumbnail Viewer II

Dynamicdrive.com

New

Revised

Hot

FAQ

Submit

M Zone

.	Menu
	Search DD Recommend DD Help Forums New DHTML books Advertising Contact
	Featured Script Rollover buttons Turn regular form buttons into rollover menus with this script! .
	Partners
	Free JavaScripts .
	Link to DD
	Do you use scripts from Dynamic Drive? Please give something back by linking to us... .

Home Image Effects Here

Image Thumbnail Viewer II IE

Credits: Dynamic Drive

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:

Configure larger image to be shown via onClick or onMouseover of thumbnail.
Images loaded can vary in dimensions, and can each be independently linked.
Specify whether images should be preloaded. Set to "no" to save on download time and bandwidth.
Define image border and optional link target.
Define multiple regions for different images to be displayed in.
In IE5.5+, an optional fade-wipe effect is applied during each image change.
Script works in all modern DHTML browsers- IE5+, NS6+, and Opera 7+.

Yes, deceptively loaded!

Demos:

Using conventional thumbnail images and activated onMouseover:

Using text links and activated onClick:

-Alarm clock
-Dice
-Lightbulb

Directions

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

Be sure to refer to the comments inside to specify the images and more.

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

As shown, a thumbnail looks something like:

<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1</a>

Inside function "modifyfunction()", pass in the ID of the DIV tag that will hold the larger image (ie: "dynloadarea"), and following that, the index number of the array element containing the desired image (see code of Step 1).

Also shown is how the DIV tag that will act as the display area of the larger image looks like:

You should set the width and height of this DIV to the dimensions of the largest image that will be shown inside it. Move this tag to the desired location on the page where the larger images should be shown.

Finally, if all this is starting to get confusing, don't worry, installing the script is actually much simpler than following the instructions, which are simply there for sake of reference. :)

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6