[Javascript] Re: need script - slideshow with captions

Sat Mar 1 00:44:34 CST 2003

>Just add an array of captions to the script and change the caption
>as you change the image?

I know I would need another array, and thank you for helping me with 
the code.  Below is the code from my page, but I'm having difficulty 
with four lines of the code you gave me:
(1) var document.myImage.src=newimage[n] // whatever it is
(2) var document.getElementById("caption").innetHTML=NewCap[n]

(3) <img id=myImage src=>
(4) <div id=caption></div>

I know where 3 and 4 go, in the HTML instead of:
<img src="photos/beaders001.jpg" name="slideshow">

but I can't figure out where 1 and 2 go, instead of what, and if 
anything else needs to change.  The original script didn't use a 
fixed array, so I can use any number or pictures and add more at any 
time.  So I wrote the caption array the same.  as long as each has 
the same number of elements it should work.  Can some help out here?  
thanks

-dana

************************** begin code *******************************

<html>
<head>
	<title>Texas Beaders</title>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
NewImg = new Array (
"photos/beaders001.jpg",
"photos/beaders002.jpg",
"photos/room.jpg"
);

NewCap = new Array(
"Caption for photo 1",
"Caption for photo 2",
"Caption for photo 3"
);

var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;

var lock = false;
var run;
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);
   }
}
//  End -->
</script>

<!--#include file="top_of_file.inc" -->  	
<!--#include file="logo.inc" -->

<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="center"><h2><b>Photos from the 4th Annual<br>
Texas Beaders Bead Retreat</b></h2></div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div align="center"><table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a> - 
</td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a> - </td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
<p>
<img src="photos/beaders001.jpg" name="slideshow"></div>

<!--#include file="bottom_of_file.inc"-->

</body>
</html>