PDA

View Full Version : SlideShow ?

scriptkeeper
05-28-2003, 06:15 PM
I have this slide show that I have been working on and I would like for it to automatically
slide through the pictures and once it reachs the end reverse! But for some reason it just gets stuck
at the end of the pictures? Any ideas?



<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="javascript1.2" type="text/javascript">
<!--
/*
Written By: Jon Palumbo/Hairynugs
*/
pix=[];
for(i=0,j=1;j<51,i<50;j++,i++){
pix[i]=new Image();
pix[i].src=((j<10)?"000":"00")+j+".jpg";}
isImage=0;
imCt=pix.length-1;
document.onkeydown=keyStruck;
if(document.layers){
document.captureEvents(Event.KEYDOWN);
leftArrow=28;
rightArrow=29;
}else{
leftArrow=37;
rightArrow=39;
}
function keyStruck(evt){
if(evt){
key_struck=evt.which;
}else{
key_struck=window.event.keyCode;
}
if(key_struck==leftArrow)nextImage(-1);
else if(key_struck==rightArrow)nextImage(1);
}
function selected(){
isSelected=document.selectIt.pictureList.selectedIndex;
document.mainShow.src=pix[isSelected].src;
document.getElementById("text").innerHTML=pix[isSelected].src;
}
function nextImage(direction){
if(document.images){
isImage=isImage+direction;
if(isImage>imCt)isImage=0;
if(isImage<0)isImage=imCt;
document.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}
}
function go(){
clearTimeout(reverse_timer)
isImage=isImage+1
if(isImage==48)reverse()
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
go_timer=setTimeout('go()',100)
}
function stop(){
clearTimeout(t)
}
function reverse(){
clearTimeout(go_timer)
isImage=isImage-1
if(isImage==1)go()
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
reverse_timer=setTimeout('reverse()',100)
}


-->
</script>
<style>
</style>
</head>
<body bgcolor="#000000">
<center>
<form name="selectIt"><select name="pictureList" onchange="selected()">
<option>0001.jpg
<option>0002.jpg
<option>0003.jpg
<option>0004.jpg
<option>0005.jpg
<option>0006.jpg
<option>0007.jpg
<option>0008.jpg
<option>0009.jpg
<option>0010.jpg
<option>0011.jpg
<option>0012.jpg
<option>0013.jpg
<option>0014.jpg
<option>0015.jpg
<option>0016.jpg
<option>0017.jpg
<option>0018.jpg
<option>0019.jpg
<option>0020.jpg
<option>0021.jpg
<option>0022.jpg
<option>0023.jpg
<option>0024.jpg
<option>0025.jpg
<option>0026.jpg
<option>0027.jpg
<option>0028.jpg
<option>0029.jpg
<option>0030.jpg
<option>0031.jpg
<option>0032.jpg
<option>0033.jpg
<option>0034.jpg
<option>0035.jpg
<option>0036.jpg
<option>0037.jpg
<option>0038.jpg
<option>0039.jpg
<option>0040.jpg
<option>0041.jpg
<option>0042.jpg
<option>0043.jpg
<option>0044.jpg
<option>0045.jpg
<option>0046.jpg
<option>0047.jpg
<option>0048.jpg
<option>0049.jpg
<option>0050.jpg
</select></form>
<img src="0001.jpg" name="mainShow"/>
<div style="color:white;" id="text">0001.jpg</div>
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(-1)" value="&lt;&lt">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="go()" value="play">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="stop()" value="stop">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(1)" value="&gt;&gt;">
</center>
</body>
</html>
Mr J
05-28-2003, 09:19 PM
I think it is because you are not cancelling the timeouts in the functions.

In function go() you have

if(isImage==48)reverse()

but you do not cancelled the timer in function go, so while function reverse() is running so is function go() hence the stalemate.

You need to include

clearTimeout(t) in both the functions

function go() {
clearTimeout(t)

function reverse() {
clearTimeout(t)

It might be wise to have different named timers for each function
scriptkeeper
05-29-2003, 01:41 AM
I thought that I had tried that already! Would it not be the same to do this?

function go(){
stop()
}
scriptkeeper
05-29-2003, 05:28 AM
Well I tried changing it still getting stuck maybe Im going about it all wrong? This is my latest failure!

function go(){
if(go()||reverse())stopGo();
isImage=isImage+1;
if(isImage==48){
reverse();}
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
go_timer=setTimeout('go()',100);
return true;
}

function reverse(){
if(go()||reverse())stopReverse();
isImage=isImage-1;
if(isImage==1){
go();}
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
reverse_timer=setTimeout('reverse()',100);
return true;
}
function stopGo(){clearTimeout(go_timer);}
function stopReverse(){clearTimeout(go_reverse);}
Mr J
05-29-2003, 09:12 AM
Please try the following



<html>
<head>
<meta http-equiv="imagetoolbar" content="no">
<script language="javascript1.2" type="text/javascript">
<!--
/*
Written By: Jon Palumbo/Hairynugs
*/
pix=[];
for(i=0,j=1;j<50,i<50;j++,i++){
pix[i]=new Image();
pix[i].src=((j<10)?"000":"00")+j+".jpg";}
isImage=0;
imCt=pix.length-1;
document.onkeydown=keyStruck;
if(document.layers){
document.captureEvents(Event.KEYDOWN);
leftArrow=28;
rightArrow=29;
}else{
leftArrow=37;
rightArrow=39;
}
function keyStruck(evt){
if(evt){
key_struck=evt.which;
}else{
key_struck=window.event.keyCode;
}
if(key_struck==leftArrow)nextImage(-1);
else if(key_struck==rightArrow)nextImage(1);
}
function selected(){
isSelected=document.selectIt.pictureList.selectedIndex;
document.mainShow.src=pix[isSelected].src;
document.getElementById("text").innerHTML=pix[isSelected].src;
}
function nextImage(direction){
if(document.images){
isImage=isImage+direction;
if(isImage>imCt)isImage=0;
if(isImage<0)isImage=imCt;
document.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;
}
}

go_timer=""
reverse_timer=""
function go(){
clearTimeout(go_timer)
clearTimeout(reverse_timer)
go_timer=setTimeout('go()',1000)
isImage=isImage+1
if(isImage==50)reverse()
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;

}
function stop(){
clearTimeout(go_timer)
clearTimeout(reverse_timer)
}

function reverse(){
clearTimeout(go_timer)
reverse_timer=setTimeout('reverse()',1000)
isImage=isImage-1
if(isImage== -1)go()
document.images.mainShow.src=pix[isImage].src;
document.getElementById("text").innerHTML=pix[isImage].src;
document.selectIt.pictureList.selectedIndex=isImage;

}


-->
</script>
<style>
</style>
</head>
<body bgcolor="#000000">
<center>
<form name="selectIt"><select name="pictureList" onchange="selected()">
<option>0001.jpg
<option>0002.jpg
<option>0003.jpg
<option>0004.jpg
<option>0005.jpg
<option>0006.jpg
<option>0007.jpg
<option>0008.jpg
<option>0009.jpg
<option>0010.jpg
<option>0011.jpg
<option>0012.jpg
<option>0013.jpg
<option>0014.jpg
<option>0015.jpg
<option>0016.jpg
<option>0017.jpg
<option>0018.jpg
<option>0019.jpg
<option>0020.jpg
<option>0021.jpg
<option>0022.jpg
<option>0023.jpg
<option>0024.jpg
<option>0025.jpg
<option>0026.jpg
<option>0027.jpg
<option>0028.jpg
<option>0029.jpg
<option>0030.jpg
<option>0031.jpg
<option>0032.jpg
<option>0033.jpg
<option>0034.jpg
<option>0035.jpg
<option>0036.jpg
<option>0037.jpg
<option>0038.jpg
<option>0039.jpg
<option>0040.jpg
<option>0041.jpg
<option>0042.jpg
<option>0043.jpg
<option>0044.jpg
<option>0045.jpg
<option>0046.jpg
<option>0047.jpg
<option>0048.jpg
<option>0049.jpg
<option>0050.jpg
</select></form>
<img src="pic1.jpg" name="mainShow"/>
<div style="color:white;" id="text">0001.jpg</div>
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(-1)" value="&lt;<">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="go()" value="play">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="stop()" value="stop">
<input type="button" style="cursor:hand; font-size:25px;background-color:lightblue;" onclick="nextImage(1)" value="&gt;&gt;">
</center>
</body>
</html>
scriptkeeper
05-29-2003, 04:51 PM
Thanks Mr. J worked great, thank for the help with all the questions. I don' t know why it works but it does! Thanks again!