Help appreciated for an image gallery problem.

[didjatallduke]

I have photo gallery pages consisting of 12 thumbnails on the left and a full-size display area to the right. When a TN is clicked, the FS image appears. All works fine, except that I need to have a short caption for each FS image appear beneath it when it opens. Seems like it would be simple, but I'm stuck. Any suggestions for how to accomplish this will be greatly appreciated. Here's the code for the area that I need fixed:

<span class="title">

Image

</span>
<span class="title2">

Gallery 1

</span><br>

BLACK & WHITE

<br><br>

<!-- START GALLERY CODE -->

<center>
<form name="slideform" action="javascript:;" class="form-margin">


<!-- PICTURES FOR THE SLIDESHOW -->

<input type="hidden" value="gallery/Fgallery1-1.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-2.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-3.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-4.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-5.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-6.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-7.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-8.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-9.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-10.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-11.jpg" name="slide" onChange="change();">
<input type="hidden" value="gallery/Fgallery1-12.jpg" name="slide" onChange="change();">

<br>

<table cellspacing="4" cellpadding="0" border="0"><tr><td align="left" valign="top" colspan="2">

<!-- NAV MENU -->


<TABLE cellpadding="0" cellspacing="0" border="0"><tr><td>
<script language="JavaScript" type="text/javascript" src="menu_gallery.js"></script>
</td><td>
<a href="gallery2.htm" class="menu-nav">next gallery</a>

</td></tr></table>


<!-- NAV MENU -->

</td></tr><tr><td align="left" valign="top">

<!-- START THUMBNAIL TABLE -->

<table cellspacing="4" cellpadding="0" border="0"><tr><td align="center">
<a href="javascript:IMG1();"><img src="gallery/gallery1-1.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG2();"><img src="gallery/gallery1-2.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr><tr><td align="center">
<a href="javascript:IMG3();"><img src="gallery/gallery1-3.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG4();"><img src="gallery/gallery1-4.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr><tr><td align="center">
<a href="javascript:IMG5();"><img src="gallery/gallery1-5.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG6();"><img src="gallery/gallery1-6.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr><tr><td align="center">
<a href="javascript:IMG7();"><img src="gallery/gallery1-7.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG8();"><img src="gallery/gallery1-8.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr><tr><td align="center">
<a href="javascript:IMG9();"><img src="gallery/gallery1-9.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG10();"><img src="gallery/gallery1-10.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr><tr><td align="center">
<a href="javascript:IMG11();"><img src="gallery/gallery1-11.jpg" border="0" class="Galborder" alt="image"></a><br>
</td><td align="center">
<a href="javascript:IMG12();"><img src="gallery/gallery1-12.jpg" border="0" class="Galborder" alt="image"></a><br>
</td></tr></table>

<br></td>
<td align="left" valign="top">

<!-- START RIGHT TABLE -->

<table cellspacing="4" cellpadding="0" border="0"><tr><td align="left" valign="top">

<!-- STARTING SLIDE -->

<img src="gallery/Fgallery1-1.jpg" name="show" width="500" height="333" class="borders" alt="image"><br>

[KDLA]

You might investigate usage of this method:
http://www.huddletogether.com/projects/lightbox/

As to your current method, you'd probably have to write some javascript, or add the captions to the image using your image editing program.

KDLA

[didjatallduke]

Thanks for the suggestions. I'll take a look at Lightbox and see if that will do the job.

[Centauri]

I prefer a full css solution as shown here (http://www.cssplay.co.uk/menu/gallery.html)

Cheers
Graeme

[didjatallduke]

Graeme:

That link is a gold mine! Lots of great ideas and samples on it. I'm still poring through it all, and I'm sure I can put together what I need from these resources, as well as the earlier tip I received. Many thanks for your help.

[The Old Sarge]

Yes, Graeme. Very useful link. But how does one go about finding the code for the examples? View source the only option?

[Centauri]

Yeah, Sarge, that seems to be the way he sets that site up. The source is usually well documented anyway, and sometimes some explainations are given on the pages.

Cheers
(The old) Graeme :D

[The Old Sarge]

Thanks again.