Image Thumbnail viewer - text descriptions?

[Learning]

Image Thumbnail Viewer
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

I love this script - very clean and efficent. I really like that if you have say 15 thumnails on a page, you can set this script to center the larger image on the page. I was wondering if it could be modified to contain a text description under the picture?

So on the first pic in the example, maybe it says "JavaScript Cookbook" underneath the pic. Second one says "DHTML and CSS" underneath it and so on.

Any type of thumbnail viewer that did this would be the best ever!

Thanks in advance,
Learning

[jscheuer1]

OK, replace this line in the script:

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'

with these lines:

var innerString='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><center id="desc"><img src="'+which+'">'
if (desc!==undefined){
if (desc!=='')
innerString+='<br>'+desc
}
innerString+='</center>'
crossobj.innerHTML=innerString

Add this to the style section:

#desc {
background-color: #EFEFEF;
font-size:80%;
}

Now, use the description like so:

<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event,'Kissing Fools')">
<img src="thumb1.jpg" border="0"></a>

in the HTML markup. If you are using no description, still include the empty (don't even put a space in there) pair of single quotes behind:

<a href="photo2.jpg" onClick="return enlarge('photo2.jpg',event,'')">
<img src="thumb2.jpg" border="0"></a>

This isn't necessary here but, if you use any of the other parameters it will be like with:

onClick="return enlarge('myimage.gif',event, 'description', 'center', imagewidth, imageheight)"

Also, don't go overboard with these descriptions. If they are too long, it will look weird. If you really must use a description that is longer than your image is wide, either live with the extra space displayed in the pop-up or use <br>'s to break up the description.

[Learning]

Thank you John so much!

Just looking to see if anyone replied before I stepped out. I can't wait to try this code out. I will post again once I give it a try just to say everything is working and thanks again.

[jscheuer1]

I was rushed when I posted that, I left out one modification to the script that is essential. Find this line in the script:

function enlarge(which, e, position, imgwidth, imgheight){

and change it to this:

function enlarge(which, e, desc, position, imgwidth, imgheight){

sorry about that.

[Perk]

Is there anyway or how would I modify this script if for say I have a different color scheme on different pages and I wanted the the border and dragbar on the enlarged picture to match the colors for each individual page when the enlarged picture opens. Thanks in advance

[jscheuer1]

That's the beauty of css style, you can use a different style section on each page that uses this script to customize the colors, available colors for customization in the original style highlighted below (from the demo style for this script):

<style type="text/css">

#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>

Another nice thing about css style is, if there is some color you want to influence that is not listed in the above, you can usually create an entry for it using standard css selector/property/value syntax to achieve your desired result. See Blooberry CSS or your favorite online css reference for more info.