Add to existing older slideshow script to include a caption for images

Question

I'm wondering if there is a small change or addition I could make to the existing script, to add captions for images in my slideshow, or if I really should just abandon this old script and start fresh. So there are two pages- an intro page and a slideshow page. The intro page has small thumbnail images that when clicked take the visitor to the slideshow page to see the large version of the thumbnail, and from there the visitor can click through all the large thumbnail-representive images or go back to the intro page.

Here's the intro page (relevant part):

<table>
   <tr>
    <td><a href="arbor-viewer-test-files.html?img=0">
     <img src="images/thumbnails/arbor_0.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=1">
     <img src="images/thumbnails/arbor_1.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=2">
     <img src="images/thumbnails/arbor_2.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=3">
     <img src="images/thumbnails/arbor_3.jpg" width="100" />
     </a></td>
    <td><a href="arbor-viewer-test-files.html?img=4">
     <img src="images/thumbnails/arbor_4.jpg" alt="DFW Patio Cover Arbors" border="0" width="100" />
     </a></td>
   </tr>
  </table>

And here's the slideshow page (relevant part):

<table border="0">
          <tr>
            <td align="center">
              <p class="center largeP bold"> <a href="javascript:chgImg(-1)">Previous</a> | <a href="javascript:auto()">Auto/Stop</a> | <a href="javascript:chgImg(1)">Next</a> <br />
                <a href="/arbors.htm">Return to the Arbor Gallery</a> </p>
              <br />
            </td>
          </tr>
          <tr>
            <td align="center"> <br />
              <img src="images/arbor_0.jpg" name="slideshow" />
              <br />
            </td>
          </tr>
        </table>
<script type="text/javascript">
showImg(queryString.img);
</script>
</body>

And here's the script:

var newimg = new Array();
newimg[0] = "images/arbor_0.jpg";
newimg[1] = "images/arbor_1.jpg";
newimg[2] = "images/arbor_2.jpg";
newimg[3] = "images/arbor_3.jpg";
newimg[4] = "images/arbor_4.jpg";

function obj_queryString(){
qs = document.URL.substring(document.URL.indexOf('?')+1,document.URL.length);
queries = qs.split(/\&/);
for(i=0;i<queries.length;i++){ 
    query = queries[i].split(/\=/);
    this[query[0]] = unescape(query[1]);}
 }

queryString = new obj_queryString();
var imgnum = 0;
var imglength = newimg.length - 1;
//delay betwn slides in millisecs
var delay = 3000;
var lock = false;
var run;

function showImg(imgnum){
document.slideshow.src = newimg[imgnum];
}

function chgImg(direction) {
if (document.images){
    imgnum = imgnum + direction;
    if (imgnum > imglength) 
        imgnum = 0;
    if (imgnum < 0) 
        imgnum = imglength;
    document.slideshow.src = newimg[imgnum];}
}

function auto(){
if (lock == true) {
    lock = false;
    window.clearInterval(run);}
else if (lock == false) {
    lock = true;
    run = setInterval("chgImg(1)", delay);}
 }

The best I could come up with was adding this to the script:

//under the newimg Array:
var caption = new Array();  
caption[0] = "Caption for the first image"; 
caption[1] = "Caption for the second image"; 
caption[2] = "Caption for the third image"; 
caption[3] = "Caption for the fourth image"; 
caption[4] = "Caption for the fifth image";

And adding a snippet along with the function at the bottom of the slideshow page (everything else is the same as above):

<p id="captionDiv><br /></p>
<script type="text/javascript">
showImg(queryString.img);
document.getElementById("captionDiv").innerHTML=caption[imgnum];
</script>

…which just shows caption[0] and doesn't change along with the images. I'm sure the solution is a no-brainer for anyone who knows more javascript than I do. I've researched and studied up online for over a week and still don't understand what to do. I need a javascript interpreter!

Answer 1

you can put document.getElementById("captionDiv").innerHTML=caption[imgnum]; inside function showImg(imgnum) so that you can get relevent image caption.