Thumbnail Viewer II [Archive] - Dynamic Drive Forums

Nickster

05-29-2005, 03:13 PM

Hi.
I'm having trouble with getting the thumbnails on my page. I am sure I have to put the images in this part of the script as well as in the <head> part. But where? I don' know anything about DIV & tags.

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:

<div id="dynloadarea" style="width:80px;height:225px"></div>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.

I have put some images in the <head> part of the script. I get a line error for line 53 which reads "object required" This is line 53:-
imgobj.filters[0].Apply()

Finally. Where my thumbnails should be, at the moment I have this in writing:-
image 1 (onmouseover)
image 2 (onmouseover)
image 3 (onclick)

I'm sure that after I know what to do to insert thumbnail images all will be well.

Sheps

bryce

05-29-2005, 03:39 PM

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

If I do what the script says I get:
<html>
<head>
<script type="text/javascript">

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

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["photo3.jpg", "http://www.google.com"]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

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

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>
</head>
<body>
<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:80px;height:225px"></div>

<div id="dynloadarea2" style="width:80px;height:200px"></div>
</body>
</html>

And this seems to work just fine. Hope this helps :)

Nickster

05-29-2005, 04:15 PM

Hi Bryce,

I have the script in just as I copied and paste, but I don't get the thumbnails of my images. I do get:-
image 1 (onmouseover)
image 2 (onmouseover)
image 3 (onclick)
But these should be thumbnail images. I think I have to do something in the last part of the script, but don't know what. Do I have to put the url of my images somewhere in this last part, and if so where?

thanks

bryce

05-29-2005, 06:37 PM

in the script as it is now, the hyperlink to the images is words ("image 1 (onmouseover) etc.) If you move your mouse over these phrases the image is shown. If you want to work with small images in stead of words replace the text by <img src="your_small_image.jpg">