New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opr7+

Image Thumbnail Viewer II

Author: Dynamic Drive

Note: Script completely rewritten May 19th 10' 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 and rolled over. 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 thethumbnail links on your page a "rel" and "rev' attribute. That's it.
  • Configure larger image to be shown via "click" or "mouseover" of thumbnail.
  • Specify whether enlarged image should be preloaded when the page loads for faster display, or only downloaded when requested to save on initial page loading time.
  • Enlarged image can be optionally hyperlinked.
  • Two types of transition effects to bring the enlarged image into view supported: "fade" or "reveal". The transition can also be disabled altogether.
  • 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.

Yes, deceptively loaded!

Demos:

Using conventional thumbnail images and activated "mouseover": Enlarged images are preloaded for faster display.





Using text links and activated "click": Enlarged images are hyperlinked, with some shown using a "reveal" effect, and NOT preloaded.

-Old Stadium
-Amsterdam
-Country Side

Directions Developer's View

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

Select All

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

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

As shown, a thumbnail link looks something like this:

<a href="bulb.gif" rel="enlargeimage" rev="option1:value1,option2:value2,option3:value3, etc">Thumbnail</a>

The thumbnail should be a link, whether it's a text or an image link. Set its "href" attribute to the full URL of the enlarged image, and the "rel" attribute always to the keyword "enlargeimage". Then, use the "rev" attribute to specify options of the script that affect this thumbnail's behaviour, such as whether to show the enlarged image onClick or onMouseover, the ID of the target DIV to show the enlarged image in, whether to preload the enlarged image etc.

The following shows the possible options you can specify inside the "rev" attribute. Separate each one with a comma if more than 1 are defined:

Available "rev" options
option Default Description
targetdiv: id

required

undefined Set targetdiv to the ID of the empty DIV on your page that the enlarged image for this thumbnail should load inside. Required. For example:

<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea">Thumbnail</a>

<div id="loadarea"></div>

trigger:eventkeyword "mouseover" Set to either "mouseover" or "click", to reveal the enlarged image accordingly. If not defined defaults to "mouseover".
link: url undefined (enlarged image not hyperlinked).

 
If defined hyperlinks the enlarged image with the specified URL: Example:

<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea,link:http://cnn.com">Thumbnail</a>

preload: yes|no "yes" Set preload to "yes" to have the script preload the enlarged image in the background automatically when the page loads, or "no" to have the image loaded only when requested (either "mouseover" or "click" of the thumbnail image).
enabletitle: yes|no "yes" enabletitle is set to "yes" by default, with the effect being that if your thumbnail link carries a "title" attribute, the script will use that to show a description beneath the enlarged image:

<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea">Thumbnail</a>

To stop a description from showing, either set enabletitle to "no" or simply remove the "title" attribute from the thumbnail.

fx: string "fade" This option sets the animation used to reveal the enlarged image. Possible values are "fade", "reveal", or "none".
fxduration: milliseconds 500 This option sets the animation duration, in milliseconds. Not applicable if string is set to "none".

targetdiv is the only required option; when multiple options are defined, separate each one with a comma. Lets see some examples now:

<a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea">Thumbnail</a>

<a href="myimages/first.jpg" rel="enlargeimage" rev="targetdiv:largearea, trigger:click,preload:no,link:http://cnn.com">Thumbnail</a>

<a href="myimages/first.jpg" title="This is a picture of my rabbit!" rel="enlargeimage" rev="targetdiv:mydiv,enabletitle:no,fxstring:reveal,fxduration:2000">Thumbnail</a>

<a href="myimages/first.jpg" title="This is a picture of my hamster!" rel="enlargeimage" rev="targetdiv:mydiv2,trigger:mouseover">Thumbnail</a>

In case you missed it upon until this point, there should be NO quotes surrounding the value of each option.