title: Caption Based on changing Image?
body: <p>I have this code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function displayNextImage() {
            x = (x === images.length - 1) ? 0 : x + 1;
            document.getElementById("img").src = images[x];
        }
  
        function displayPreviousImage() {
            x = (x &lt;= 0) ? images.length - 1 : x - 1;
            document.getElementById("img").src = images[x];
        }
  
        function startTimer() {  //this is started when the body is loaded
            setInterval(displayNextImage, 10000);
        }
  
        var images = [], x = -1;
        images[0] = "image0.jpg";
        images[1] = "image1.jpg";
        images[2] = "image2.jpg";
        images[3] = "image3.jpg";
  &lt;/script&gt;
  </code></pre>
  
  <p>Basically every 10 seconds (defined by the setInterval) it changes to the next image, then cycles back to the first image again. <strong>What I need, is when</strong> it displays Image 0 it shows a caption bellow the image "This images was taken by etc.", but when it changes to the second image (Image1) it changes it to the caption for the second image and so on?
  Preferably using Javascript or maybe JQuery if necessary (I'm better at JavaScript)</p>
  
  <p>I know this could be done by editing the photo in Photoshop by adding some space on the bottom and adding some text that way, but I think it wouldn't look nice.</p>