Image Thumbnail Viewer II
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 |
Step 1: Add the following script to the <head> section of your page:
The code references an external .js file and an image, which you should download below:
-
thumbnailviewer2.js (edit "loadmsg" variable inside file)
-
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:
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:
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> |
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 |
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.