Thumbnail Viewer

**RisingStarsWD** · 11-08-2004, 04:00 PM

Hello,

I am trying to add captions with the photos. I have figured out how to get a caption to show up. But, I cannot figure out how to get the correct caption to show up with each picture. Right now, it just shows the same caption for all of the pictures. Any help would be appreciated. Thank you.

**cr3ative** · 11-08-2004, 04:20 PM

Hi,

Please lay out your question properly, provide a link to the script you are using.
See my signature for a link on correct question layout.

cr3ative

**RisingStarsWD** · 11-08-2004, 04:36 PM

Script: Thumbnail Viewer II

I would like to add captions to the photos when the larger image is displayed after clicking the thumbnail. I have figured out how to put in descriptions, by putting the following in to the code:

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="Photo by Dexter Browne/Phat EFX"
description[1]="Photo by Dexter Browne/Phat EFX"
description[2]="Photo by Dexter Browne/Phat EFX"
description[3]="Unk Clothing Ad, Photo by Dexter Browne"
description[4]="Unk Clothing Ad, Photo by Dexter Browne"
description[5]="Unk Clothing Ad, Photo by Dexter Browne"
description[6]="King Magazine 2004"
description[7]="King Magazine 2004"
description[8]="King Magazine 2004"
description[9]="Honey Magazine"
description[10]="Honey Magazine"
description[11]="Elise executive produces Godiva: Assorted Flavors"
description[12]="Essense Magazine 2001"
description[13]="Heart & Soul Magazine 2001"
description[14]="White Chicks Premiere July 2004"

and adding +description to the following part:

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

Each image shows the same caption, I am trying to find out how to get each image to show the correct caption.

Thank you

**cr3ative** · 11-08-2004, 05:07 PM

Here you are, just replace the names/images/descriptions... you know what I mean.
This should work.

HTML Code:

<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
* Modified by cr3ative and RisingStarsWD
***********************************************/

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

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="Photo1X"
description[1]="Photo2X"
description[2]="Photo3X"

//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,imgindex){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'"> <BR>' + description[imgindex]
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],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>

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

</html>

cr3ative

**RisingStarsWD** · 11-08-2004, 05:16 PM

Ok, now instead of it saying the caption for each image. It says "undefined"

**RisingStarsWD** · 11-08-2004, 05:18 PM

Yippe, I figured it out! I found one photo with the wrong caption, so i am adjusting by changing the numbers in the [] to fit, the number with the image, and it worked. Thank you for your help.

**cr3ative** · 11-08-2004, 05:35 PM

No problem. I had that undefined problem as well, easily cured.

That script too me far too long to figure out... I'm having an off day

cr3ative

Thread: Thumbnail Viewer

Thread Tools

Search Thread

Thumbnail Viewer

Bookmarks

Bookmarks

Posting Permissions