Image Thumbnail Viewer II - Caption or Link

[buvwon]

Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I was wondering if there is a way to make a caption appear at the bottom of the image. I'd would like to be able to format that text, including making it a link. One tricky part of it is that it would be ideal if the text appear at the bottom right of the picture... I say tricky because I am dealing with many different size images (verticals and horizontals), so that wouldn't be just one location.

Here is a reference page: http://www.deanamason.com/apr06/women

Thanks in advance!

[jscheuer1]

OK, make your array like so:

//Specify image paths, optional link (set link to "" for no link) and Caption:
var dynimages=new Array()
dynimages[0]=["W1.jpg", "", "Madonna"]
dynimages[1]=["W2.jpg", "", "Alice"]
dynimages[2]=["W3.jpg", "", "Brandy"]
dynimages[3]=["W4.jpg", "", "Cheryl"]
dynimages[4]=["W5.jpg", "", "Cynthia"]
dynimages[5]=["W6.jpg", "", "Kristie"]
dynimages[6]=["W7.jpg", "", "Alison"]
dynimages[7]=["W8.jpg", "", "Jeanette"]
dynimages[8]=["W9.jpg", "", "Joan"]
dynimages[9]=["W10.jpg", "", "Alia"]
dynimages[10]=["W11.jpg", "", "Muriel"]
dynimages[11]=["W12.jpg", "", "Cindy"]

Make the function modifyimage(loadarea, imgindex) like so (addition red):

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])+'<div id="cap">'+dynimages[imgindex][2]+'</div>'
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

Add to your style section (red again):

<style type="text/css">
<!--
body {
	margin-top: 10px;
}

#cap {
font-family:verdana, sans-serif;
font-size:90%;
color:#333;
background-color:white;
padding-top:3px;
}
-->
</style>

Finally, to get the layout to accommodate the added height for captions with the images with the largest vertical dimensions, find this area in your markup:

<td rowspan="4"><img src="../text/blip-black.gif" width="5" height="400"></td>
<td rowspan="4"><div align="right"><img src="../text/blip-green.gif" width="125" height="400"></div></td>

and make it like so:

<td rowspan="4"><img src="../text/blip-black.gif" width="5" height="420"></td>
<td rowspan="4" style="background-image:url('../text/blip-green.gif');">&nbsp;</td>

Notes: If you want no caption for a particular image, do like so:

dynimages[5]=["W6.jpg", "", " "]

You may use HTML in the caption field but use ' for ":

dynimages[5]=["W6.jpg", "", "<span style='color:red;'>Kristie</span>"]

And make sure not to load it up with things that will add more than 20px to the height of the rows there without increasing the total available height:

<td rowspan="4"><img src="../text/blip-black.gif" width="5" height="420"></td>
<td rowspan="4" style="background-image:url('../text/blip-green.gif');">&nbsp;</td>