[Javascript] Re: need script - slideshow with captions

Sat Mar 1 08:20:46 CST 2003

All you need to do is ad another array of caption contents after or before 
the img arrays the same way:

NewCapt = new Array (
"this and that",
"caption contents",
"capiton3",

...until the last img caption and u're done
)

And at this line:

    document.slideshow.src = NewImg[ImgNum];

ad something like:

    caption.innerText = NewCapt[ImgNum];

and inside the HTML before this line:

   <img src="photos/beaders001.jpg" name="slideshow">

add the (in style) formated DIV:

   <DIV ID="caption">The Defalt img caption text</DIV>

And ure done.
Cheers!

>From: Dana Hall <lists at dbeads.net>
>Reply-To: javascript at LaTech.edu
>To: <javascript at LaTech.edu>
>Subject: [Javascript] Re: need script - slideshow with captions
>Date: Fri, 28 Feb 2003 22:44:34 -0800
>
> >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

_________________________________________________________________