View Full Version : Image Thumbnail Viewer II HELP

03-13-2007, 01:37 AM

I was hoping someone could help me?

I am using this script: Image Thumbnail Viewer II

I have created this page and when I preview it on my computer it works perfectly: (However is isn't online?) Can anyone see the hover effects? Why can't I?

Secondly, I want to have the left thumbnails in a scrolling iframe, but still have the larger hover image appear on the right... how do I connect the two? I think the script only works as it is as long as its all on the same page?
I have tried various things, like changing div to target etc etc... please help.
Here is what I tried to do... The scrolling works perfectly but not the hover appearance part...

What a nightmare!
I appreciate any help at all!


Thank you so much.

03-13-2007, 03:37 AM
I've made my code purely based on the example mentioned in the Image Thumbnail Viewer II script.

Page Name: 1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<iframe src="2.htm" height="100" width="250" frameborder="1" scrolling="auto"></iframe>

<div id="loadarea" style="width: 600px"></div>

<h2 />

<div id="loadarea2" style="width: 550px"></div>

Page Name: .htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

* Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use


<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 />

JS file name: thumbnailviewer.js

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: window.parent.document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=window.parent.document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarged image has completely loaded
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?

var showcontainer=window.parent.document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in

cleanup:function(){ //Clean up routine on page unload
if (this.featureImage){this.featureImage.onload=null; this.featureImage.onerror=null; this.featureImage=null}
for (var i=0; i<this.targetlinks.length; i++){

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)

init:function(){ //Initialize thumbnail viewer script
this.iefiltercapable=(this.iefiltercapable && this.enableTransition) //True or false: IE filters supported and is enabled by user
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))){ //Begin if statement: Test for rel="enlargeimage"
var initType=pagelinks[i].getAttribute("rel").split("::")[1] //Get display type of enlarged image ("click" or "mouseover")
if (initType=="mouseover"){ //If type is "mouseover", preload the enlarged image for quicker display
this.preloadedimages[this.preloadedimages.length]=new Image()
pagelinks[i]["onclick"]=function(){ //Cancel default click action
return false
pagelinks[i]["on"+initType]=function(){ //Load enlarged image based on the specified display type (event)
thumbnailviewer2.loadimage(this) //Load image
return false
if (this.hideimgmouseout)
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement

} //END init() function


if (document.addEventListener) //Take advantage of "DOMContentLoaded" event in select Mozilla/ Opera browsers for faster init
thumbnailviewer2.addEvent(document, function(){thumbnailviewer2.alreadyrunflag=1; thumbnailviewer2.init()}, "DOMContentLoaded") //Initialize script on page load
else if (document.all && document.getElementsByTagName("a").length>0){ //Take advantage of "defer" attr inside SCRIPT tag in IE for instant init
thumbnailviewer2.addEvent(window, function(){if (!thumbnailviewer2.alreadyrunflag) thumbnailviewer2.init()}, "load") //Default init method: window.onload
thumbnailviewer2.addEvent(window, function(){thumbnailviewer2.cleanup()}, "unload")

This will give you the thumbnailviewer and iframe functionality combined. Hope this helps

03-14-2007, 05:24 PM
It works perfectly!
Really, Thank you! Such a fast response too!

04-28-2007, 05:14 PM
Hi codeexploiter
I hope you can help me.
I am also using the thumbnailviewer2
My problem is to disable the click on the loaded image as it is not hyperlinked
I would like to keep the option
hideimgmouseout: false //
and disable the click on the image, rather then using :true

The second problem is that I do not know where to enter the hyperlink destination address. At this moment when clciked on the loaded image you are taken to a new window with an obvious error message.
Thank you in advance for any help you can offer.

01-02-2011, 11:10 PM
Heed help! How to give sizes for big loaded images? (width / height) Thanks