Image Thumbnail Viewer II

[ladycat]

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

Is it possible to have a caption under the big pictures show up on rollover of the thumbnail?

If not, I could always use alternate text for the images, but it would be a cool effect to have the caption show up under a pic.

Edit: on second thought, I'm not sure how to add alternate text in this script.

[ddadmin]

Sure, to enable a caption for a particular image, simply replace the code of Step 1 for the script with:

<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", "This is a caption"]
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>'
if (typeof theimg[2]!="undefined")
imghtml+='<br />'+theimg[2]
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>

The first image has a caption.

[ladycat]

That works GREAT, thanks!

Reference for future users of the forum:

This part:

<div id="dynloadarea" style="width:350px;height:420px"></div>

Has to be adjusted for greater height to accomodate the extra space taken up by the caption.

[cheri]

Is there a way to change the font size of the caption?

[jscheuer1]

Is there a way to change the font size of the caption?

Sure, the same ways you would any text. To change all the captions, you can use style in the head:

<style type="text/css">
#dynloadarea {
font-size:.9em;
}
</style>

[vanbao]

Hi, is there a way to make it so each time a mouse is over the thumb nail, a highlighted border will show up. Very much like this
http://www.venusbeautyandbody.com/in...acne-treatment
Thank you.

[jscheuer1]

Yes, it will depend upon how you have things set up and upon the size of your thumbnails, easiest if they are all the same size. Put a style section in the head of your page, something like this:

<style type="text/css">
.thumb {
margin:5px 5px 0 0;
padding:5px;
border:1px solid #dedede;
display:block;
width:50px;
}

.thumb:hover {
border:1px solid black;
}
</style>

The only really important thing is the width. Set it to the width of the thumbnails. If the thumbnails vary in width it will need to be set inline for each one's anchor tag. Now, in the markup for the thumbnails (loosely from the demo), you can use:

<a href="#" class="thumb" onMouseover="modifyimage('dynloadarea', 0)"><img src="thumb1.jpg" width="50" height="50" border="0"></a>