Menu
Hi,
I have read through the numerous other posts regarding javascript slideshows with captions but I cannot quite apply them to my own situation. I have a slideshow that plays, and allows manual control. I would like to add captions for the image, but right now I get nothing. Probably a small snag in the code but I’m too new to know it.
So here’s the code.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Dana Lixenberg – Imperial Courts</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”../know2.css” rel=”stylesheet” type=”text/css”>
</head>
<script language=”JavaScript”>
<!–
var interval = 5000
var imgDir = “dana_img/ic_full/”;
var imgNum = 0;
imgSet = new Array();
imgSet[imgNum++] = new imageItem(imgDir + “01.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “02.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “03.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “04.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “05.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “06.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “07.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “08.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “09.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “10.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “11.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “12.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “13.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “14.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “15.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “16.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “17.jpg”);
imgSet[imgNum++] = new imageItem(imgDir + “18.jpg”);
var totalImg = imgSet.length;
var capNum = 0;
CapSet = new Array();
CapSet[capNum++] = “Spider”;
CapSet[capNum++] = “China”;
CapSet[capNum++] = “Coco”;
CapSet[capNum++] = “Witeysha”;
CapSet[capNum++] = “Dusty”;
CapSet[capNum++] = “Untitled”;
CapSet[capNum++] = “Baby Loc”;
CapSet[capNum++] = “La Shaan”;
CapSet[capNum++] = “Mona”;
CapSet[capNum++] = “DJ”;
CapSet[capNum++] = “J 50”;
CapSet[capNum++] = “Selena”;
CapSet[capNum++] = “Toussaint”;
CapSet[capNum++] = “Sharky”;
CapSet[capNum++] = “Sharon”;
CapSet[capNum++] = “Miyong and Anthony”;
CapSet[capNum++] = “Lee Capone”;
CapSet[capNum++] = “Untitled”;
var totalCap = CapSet.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_imageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function NextImg() {
imgNum = (imgNum+1) % totalImg;
var new_image = get_imageItemLocation(imgSet[imgNum]);
return(new_image);
}
function getPrevImg() {
imgNum = (imgNum-1) % totalImg;
var new_image = get_imageItemLocation(imgSet[imgNum]);
return(new_image);
}
function prevImg(place) {
var new_image = getPrevImg();
document[place].src = new_image;
}
function switchImg(place) {
var new_image = NextImg();
document[place].src = new_image;
var recur_call = “switchImg(‘”+place+”‘)”;
timeID = setTimeout(recur_call, interval);
}
function NextCap() {
capNum = (capNum+1) % totalCap;
}
function getPrevCap() {
capNum = (capNum-1) % totalCap;
}
function prevCap(place) {
var new_caption = getPrevCap();
document.getElementById[place].innerHTML = new_caption;
}
function switchCap(place) {
var new_caption = NextCap();
document.getElementById[place].innerHTML = new_caption;
var recur_call = “switchCap(‘”+place+”‘)”;
timeID = setTimeout(recur_call, interval);
}
//–>
</script>
<body>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” valign=”middle”>
<br>
<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr align=”center”>
<td width=”100″> </td>
<td align=”center” valign=”middle”><img name=”slideImg” src=”dana_img/ic_full/01.jpg” width=”315″ height=”400″ border=”0″></td>
<td width=”100″> </td>
</tr>
<tr>
<td height=”40″> </td>
<td height=”40″ id=”caption” class=”caption”>…</td>
<td height=”40″> </td>
</tr>
<tr>
<td align=”center” valign=”middle”><a href=”#” onClick=”prevImg(‘slideImg’); clearTimeout(timeID)”>previous</a></td>
<td align=”center” valign=”middle”><a href=”#” onClick=”switchImg(‘slideImg’); switchCap(‘caption’)”>play</a><span class=”main”>
||</span><a href=”#” onClick=”clearTimeout(timeID)”> pause</a></td>
<td align=”center” valign=”middle”><a href=”#” onClick=”switchImg(‘slideImg’); switchCap(‘caption’); clearTimeout(timeID)”>next</a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>