Javascript Slideshow

ChelleWSU · 10-10-2006, 03:39 PM

I have set up a pretty good slideshow, but my controls (back, forward, pause...) don't work for some reason. The slides autostart and move on their own, but I also want to have the viewer able to control it.

Here's the entire code:

<head>
<script>
var SlideShowSpeed = 10000;

var CrossFadeDuration = 2;

var Picture = new Array();

Picture[1] = 'pic1.jpg';
Picture[2] = 'pic2.jpg';
Picture[3] = 'pic3.jpg';
Picture[4] = 'pic4.jpg';
Picture[5] = 'pic5.jpg';
Picture[6] = 'pic6.jpg';
Picture[7] = 'pic7.jpg';
Picture[8] = 'pic8.jpg';
Picture[9] = 'pic9.jpg';

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
</script>
</head>

<body>
<TR>
<TD width="339" height="390" align="center" valign="top"> <body onload=runSlideShow() bgcolor=#000000>
<div align="center">
<table border=0 cellpadding=0 cellspacing=0><center>
<tr>
<td width=300 height=300> <div align="center"><img src=pic1.jpg name=PictureBox width=300 height=300>
</div></td>
</tr>
</table>
<table width="300" border="0">
<tr><FORM>
<td width="100" height="39"><div align="center">
<input name="button" type="image" onClick="SLIDES.next()" src="forward.jpg"></div></td>
<td width="100"><div align="center">
<INPUT TYPE="image" src="pause.jpg" onClick="SLIDES.pause()"></div></td>
<td width="100"><div align="center">
<INPUT TYPE="image" src="back.jpg" onClick="SLIDES.previous()"></div></td>
</FORM></tr>
</table>
</div>
</body>

Any help would be greatly appreciated. Thanks.

**DJ-Zep** · 10-11-2006, 05:26 PM

Works for me...have you checked your browser settings to enable javascript?

10-10-2006, 03:39 PM	#1 (permalink)
ChelleWSU Registered User Join Date: Sep 2004 Posts: 34 OS: WinXP Pro SP2	Javascript Slideshow I have set up a pretty good slideshow, but my controls (back, forward, pause...) don't work for some reason. The slides autostart and move on their own, but I also want to have the viewer able to control it. Here's the entire code: <head> <script> var SlideShowSpeed = 10000; var CrossFadeDuration = 2; var Picture = new Array(); Picture[1] = 'pic1.jpg'; Picture[2] = 'pic2.jpg'; Picture[3] = 'pic3.jpg'; Picture[4] = 'pic4.jpg'; Picture[5] = 'pic5.jpg'; Picture[6] = 'pic6.jpg'; Picture[7] = 'pic7.jpg'; Picture[8] = 'pic8.jpg'; Picture[9] = 'pic9.jpg'; var tss; var iss; var jss = 1; var pss = Picture.length-1; var preLoad = new Array(); for (iss = 1; iss < pss+1; iss++){ preLoad[iss] = new Image(); preLoad[iss].src = Picture[iss];} function runSlideShow(){ if (document.all){ document.images.PictureBox.style.filter="blendTrans(duration=2)"; document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)"; document.images.PictureBox.filters.blendTrans.Apply();} document.images.PictureBox.src = preLoad[jss].src; if (document.all) document.images.PictureBox.filters.blendTrans.Play(); jss = jss + 1; if (jss > (pss)) jss=1; tss = setTimeout('runSlideShow()', SlideShowSpeed); } </script> </head> <body> <TR> <TD width="339" height="390" align="center" valign="top"> <body onload=runSlideShow() bgcolor=#000000> <div align="center"> <table border=0 cellpadding=0 cellspacing=0><center> <tr> <td width=300 height=300> <div align="center"><img src=pic1.jpg name=PictureBox width=300 height=300> </div></td> </tr> </table> <table width="300" border="0"> <tr><FORM> <td width="100" height="39"><div align="center"> <input name="button" type="image" onClick="SLIDES.next()" src="forward.jpg"></div></td> <td width="100"><div align="center"> <INPUT TYPE="image" src="pause.jpg" onClick="SLIDES.pause()"></div></td> <td width="100"><div align="center"> <INPUT TYPE="image" src="back.jpg" onClick="SLIDES.previous()"></div></td> </FORM></tr> </table> </div> </body> Any help would be greatly appreciated. Thanks.

10-11-2006, 05:26 PM	#2 (permalink)
DJ-Zep Design Team Join Date: Mar 2006 Location: Philadelphia Posts: 1,541 OS: Windows Vista Home Premium (x64) My System	Works for me...have you checked your browser settings to enable javascript? __________________ Nice music blog Nvu \|\| Notepad++ \|\| Apache \|\| PHP \|\| Keep TSF Alive "The great thing about a computer notebook is that no matter how much you stuff into it, it doesn't get bigger or heavier."