Hi there sharkyjay,
add this rule to your stylesheet...
#caption {
text-align:center;
}
...add this code to your script...
var captions=new Array();
captions[1]="this is caption one";
captions[2]="this is caption two";
captions[3]="this is caption three";
captions[4]="this is caption four";
captions[5]="this is caption five";
captions[6]="this is caption six";
captions[7]="this is caption seven";
captions[8]="this is caption eight";
captions[9]="this is caption nine";
captions[10]="this is caption ten";
captions[11]="this is caption eleven";
captions[12]="this is caption twelve";
function changeCaption(num) {
document.getElementById("caption").innerHTML=captions[num];
}
...change this line...
<tr><td></td><td><p><center>Caption goes here</center></p></td></tr>
...to this...
<tr><td></td><td ><p id="caption">this is caption one</p></td></tr>
...and finally add...
;changeCaption()
...to the links like this...
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/1.jpg',1);changeCaption(1)"><img name="pic1" src="pictures/thumbs/1.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/2.jpg',1);changeCaption(2)"><img name="pic2" src="pictures/thumbs/2.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/4.jpg',1);changeCaption(3)"><img name="pic4" src="pictures/thumbs/4.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/5.jpg',1);changeCaption(4)"><img name="pic5" src="pictures/thumbs/5.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/6.jpg',1);changeCaption(5)"><img name="pic6" src="pictures/thumbs/6.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/7.jpg',1);changeCaption(6)"><img name="pic7" src="pictures/thumbs/7.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/11.jpg',1);changeCaption(7)"><img name="pic11" src="pictures/thumbs/11.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/12.jpg',1);changeCaption(8)"><img name="pic12" src="pictures/thumbs/12.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/13.jpg',1);changeCaption(9)"><img name="pic13" src="pictures/thumbs/13.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/14.jpg',1);changeCaption(10)"><img name="pic14" src="pictures/thumbs/14.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/15.jpg',1);changeCaption(11)"><img name="pic15" src="pictures/thumbs/15.jpg" width="100" height="55"> </a> </td>
<td> <a onClick="MM_swapImage('gallery_pic','','pictures/16.jpg',1);changeCaption(12)"><img name="pic16" src="pictures/thumbs/16.jpg" width="100" height="55"> </a> </td>
...all that is left is for you to edit the highlighted captions to your needs. :D