[Javascript] Re: need script - slideshow with captions

Sat Mar 1 01:47:47 CST 2003

something like this? of course you'd need something in the script to tell
you when you got to the end, or the beginning etc
Not sure if you need the full url of the image, dont think so.

<a href=javascript:nextImg(1)>Next</a>
<a href=javascript:nextImg(-1)>Back</a><br>

<img id=myImage src=img1.gif>
<div id=caption></div>

<script>
var imgs=new Array("img1.gif","img2.gif"...)
var cap=new Array("caption 1","caption2 ",....)
var cur=0
function nextImg(n)
{
cur=cur+n
 if(cur==0){cur=1)  //check not at start or end
 if(cur>2){cur=1)  //check not at start or end

document.myImage.src=imgs[cur]
document.getElementById("caption").innerHTML=cap[cur]
}

</script>

>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>

_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript