Add captions to very basic jquery carousel

I've seen this very simple jquery styled carousel on another thread and think it would be ideal for a project I'm doing but wondering how it could be adapted to include captions on the images?

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.png";
path[1] = "image_2.png"; 
path[2] = "image_3.png"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",2000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />

Any help or suggestions without having to overhaul the carousel would be greatly appreciated!

Answers


<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = {img: "image_1.png", sub: "subtitle 1"};
path[1] = {img: "image_2.png", sub: "subtitle 2"}; 
path[2] = {img: "image_3.png", sub: "subtitle 3"}; 

function swapImage() {
document.slide.src = path[i].img;
document.subtitle.innerHTML = path[i].sub; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",2000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />
<p name="subtitle"></p>

It's very simple, sample below, also notice, that demo uses setInterval instead of setTimeout

var i = 0;
var path = new Array();

// LIST OF IMAGES 
path[0] = "http://lorempixel.com/400/200/sports/1";
path[1] = "http://lorempixel.com/400/200/sports/2";
path[2] = "http://lorempixel.com/400/200/sports/3";

function swapImage() {
  document.slide.src = path[i];
  // for the sake of example, we show urls of pictures
  document.querySelector('#slide_caption').textContent = path[i];
  if (i < path.length - 1) {
    i++;
  } else {
    i = 0;
  }
}
setInterval(swapImage, 2000);
window.onload = swapImage;
<h3 id="slide_caption"></h3>
<img height="200" name="slide" width="400" />

Need Your Help

XPATH / PHP trouble with last()

php xml xpath simplexml

I've tried reading various tutorials online but I can't make any headway on solving this issue which is easy to describe but which I can not conceive of a solution.

Setting Spark master ip @

apache-spark

I have a Spark workers which can't connect to its master because of an IP issue.