CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Michael
Michael

Reputation: 39

Caption Based on changing Image?

I have this code:

<script type="text/javascript">
function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
      }

      function displayPreviousImage() {
          x = (x <= 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";
</script>

Basically every 10 seconds (defined by the setInterval) it changes to the next image, then cycles back to the first image again. What I need, is when 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)

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.

Upvotes: 0

Views: 510

Answers (1)

Rob_M
Rob_M

Reputation: 185

You can use your displayNextImage(), displayPreviousImage() functions to place prepared captions into a DIV element:

<script type="text/javascript">
function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
          document.getElementById("cap").innerHTML = captions[x];
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
          document.getElementById("cap").innerHTML = captions[x];
      }

      function startTimer() {  //this is started when the body is loaded
          setInterval(displayNextImage, 10000);
      }

      var images = [], captions = [], x = -1;
      images[0] = "image0.jpg";
      images[1] = "image1.jpg";
      images[2] = "image2.jpg";
      images[3] = "image3.jpg";

      captions[0] = "foo";
      captions[1] = "bar";
      captions[2] = "foobar";
      captions[3] = "foobarfoo";
</script>

In your HTML, add <div id="cap"></div>

Upvotes: 1

Related Questions