How can I stop a slide show [Archive]

haynbrian

03-07-2003, 12:25 PM

I have the script to start a slide show. The code below is a function that will start when a piece of text is clicked on the page. Now all I need is the ability to stop the script with a function that works when another piece of text is clicked. The text will most likely be stylized in CSS as a link, one being "start" and one being "stop". Here is the code that I have so far. Any suggestions on how I can stop it? Ultimately I would like it to show the picture that it stopped on, and when the start button is clicked, it will proceed with the next picture in the array.

var autoPx = new Array("image.jpg","image2.jpg", "image3.jpg")
var Pic = 0

function nextPic() {
if (document.images && Pic < 3) {
document.slide.src=autoPx[Pic]
Pic++
}
else if (document.images && Pic == 3) {
document.slide.src=autoPx[Pic]
Pic = 0
};

setTimeout("nextPic()",2500);
}

//-->
</script>

Thanks,
Brian

gil davis

03-07-2003, 12:59 PM

Dan Drillich

03-07-2003, 01:00 PM

You should use the Window.clearTimeout(timeoutId). The timeoutId argument is the value returned by the call to setTimeout().

MjhLkwd

05-21-2003, 04:58 PM

1. The following is a COMPLETE HTML document which contains a slideshow with user selectable timing delay, and a pause feature, for use with 640x480 .jpg files. Easily modifiable!
Use NotePad to create a file that contains the following:

<html xmlns:t ="urn:schemas-microsoft-com:time" >

<HEAD>
<style>.time { behavior: url(#default#time2) }
</style>
<?IMPORT namespace="t" implementation="#default#time2">
<TITLE>Photo Album</TITLE>

</head>

<script language="javascript">

var setDefaultErrImg="BlankMsg.jpg";
var setDefaultErrTxt="Blank";
var empty = 0;
var Nx = 0;
nextimage = new Image();
nextimage.src = " ";
var userdelay = "";
var tick = ""
var msg = " ";
var count = 0;
var savecount = 0;
var imgcount = 0;

function haltshow(){
if (savecount == 0){savecount = count;
count = imgcount};
}

function displayit(){
window.open(nextimage.src,"SlideShow","toolbar=0,status=1,width=640,height= 480,top=0,left=0").status = "This is " + count + " of " +imgcount;

}

function getnextimage() {
if (count < imgcount){++count};
nextimage.src = document.images[count-1].src;
displayit();
if (count < imgcount){countdown()};
}

function countdown(){
if (tick > 0){msg = tick} else{msg = "Fetching Next Image..."};
if (tick >= 0){tick = tick -1
window.status = msg;
if (savecount > 0){tick = userdelay -1;runshow()}
else{setTimeout("countdown()", 1000)}; }
else{tick = userdelay -1;
runshow(); }

}

function runshow() {
if (count < imgcount){getnextimage()};
if (savecount > 0){window.status="The Slideshow Is Paused at Image "
+savecount + " of " +imgcount + "."}
if (count == imgcount){convert();
if (savecount > 0){count=savecount-1;
savecount=0
window.open("pausemsg.html",
"SlideShow");}
else{count=0
window.status="The Slideshow Is Complete."};
}

}

function initShow(ImgCnt,Blank,Dn){
imgcount = ImgCnt-Blank;
userdelay = Dn;
tick = userdelay-1;
convert();
runshow();
}

function convert() {
var inputColl = document.all.tags("INPUT");
if (inputColl!=null && inputColl.length>0) {
var range = inputColl[0].createTextRange();
if (savecount > 0){range.text = "Resume"}
else{range.text ="Start Slideshow"};
}
}

function FillBlank(n){
document.images[n].src = setDefaultErrImg;
document.images[n].setAttribute("alt",setDefaultErrTxt);
++empty
}

function statusmsg(){
window.status="Done"
}

function getInterval(){
if (document.IGroup.interval[0].checked=="1"){Nx = document.IGroup.interval[0].value};
if (document.IGroup.interval[1].checked=="1"){Nx = document.IGroup.interval[1].value};
if (document.IGroup.interval[2].checked=="1"){Nx = document.IGroup.interval[2].value};
if (document.IGroup.interval[3].checked=="1"){Nx = document.IGroup.interval[3].value};
if (document.IGroup.interval[4].checked=="1"){Nx = document.IGroup.interval[4].value};
if (document.IGroup.interval[5].checked=="1"){Nx = document.IGroup.interval[5].value};
if (document.IGroup.interval[6].checked=="1"){Nx = document.IGroup.interval[6].value};
if (document.IGroup.interval[7].checked=="1"){Nx = document.IGroup.interval[7].value};
if (document.IGroup.interval[8].checked=="1"){Nx = document.IGroup.interval[8].value};
}

function startShow(){
getInterval()
initShow(PixCount,empty,Nx);
}

</script>

</head>

<BODY onLoad="statusmsg()" vlink="Gray" alink="Lime" BGColor="lightyellow">
<center>
<name ="top"><font face="arial,helvetica" color="Blue" size="5">Click On An Image To Enlarge It</font>
<br>

<t:seq repeatCount="indefinite">
<t:par>
<div class="time" begin="0" dur="3" timeAction="display">Doing This Will RESET The Slideshow</div>
</t:par>
<div class="time" dur="3" timeAction="display">- ! -</div>
</t:par>
</t:seq>

<hr>
</center>

<Table width="650" Border="0" Align="center" Cellspacing="0" Cellpadding="0" >
<TR>
<TD align="center" BGCOLOR="orange">
<h3>Use The <font color="Red">BACK</font> Button To Return<br>
From The Full View</h3>
</TD>
<TD align="center" BGColor="tan">
<input type="button" name="null" value="Start Slideshow" onClick="startShow()"/>
</TD>
<TD width="3%" align="right" BGColor="yellow">
<input type="image" name="pausebtn" src="pausebtn.gif"
onclick="haltshow()" border="0" />
</TD>
</TR>
</Table>

<form name="IGroup">
<Table Width="500" align="center" Border="0" BGColor="LightBlue" Border="1">
<TR>
<TD>
Slideshow Interval:
<TD>
<input type="radio" name="interval" value="2">2
</TD>
<TD>
<input type="radio" name="interval" value="3">3
</TD>
<TD>
<input type="radio" name="interval" value="4" >4
</TD>
<TD>
<input type="radio" name="interval" value="5" checked>5
</TD>
<TD>
<input type="radio" name="interval" value="6">6
</TD>
<TD>
<input type="radio" name="interval" value="7">7
</TD>
<TD>
<input type="radio" name="interval" value="8">8
</TD>
<TD>
<input type="radio" name="interval" value="9">9
</TD>
<TD>
<input type="radio" name="interval" value="10">10
</TD>
</TR>
</Table>
</form>

<TABLE WIDTH="650" BORDER="2" ALIGN="center" CELLSPACING="2" CELLPADDING="1"
HEIGHT="113">

<TR>
<TD WIDTH="20%">
<a href="1.jpg" Name="Viewer1"><img src="1.jpg" onError="FillBlank(0)" width="120" height="90" alt ="Click to enlarge"
/></a></TD>
<TD WIDTH="20%">
<a href="2.jpg" Name="Viewer1"><img src="2.jpg" onError="FillBlank(1)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="3.jpg" Name="Viewer1"><img src="3.jpg" onError="FillBlank(2)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="4.jpg" Name="Viewer1"><img src="4.jpg" onError="FillBlank(3)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="5.jpg" Name="Viewer1"><img src="5.jpg" onError="FillBlank(4)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>


<TR>
<TD WIDTH="20%">
<a href="6.jpg" Name="Viewer1"><img src="6.jpg" onError="FillBlank(5)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
<TD WIDTH="20%">
<a href="7.jpg" Name="Viewer1"><img src="7.jpg" onError="FillBlank(6)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="8.jpg" Name="Viewer1"><img src="8.jpg" onError="FillBlank(7)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="9.jpg" Name="Viewer1"><img src="9.jpg" onError="FillBlank(8)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="10.jpg"Name="Viewer1"><img src="10.jpg" onError="FillBlank(9)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>


<TR>
<TD WIDTH="20%">
<a href="11.jpg"Name="Viewer1"><img src="11.jpg" onError="FillBlank(10)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
<TD WIDTH="20%">
<a href="12.jpg"Name="Viewer1"><img src="12.jpg" onError="FillBlank(11)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="13.jpg"Name="Viewer1"><img src="13.jpg" onError="FillBlank(12)" width="120" height="90" alt ="Click to enlarge" />
</a></TD>
<TD WIDTH="20%">
<a href="14.jpg"Name="Viewer1"><img src="14.jpg" onError="FillBlank(13)" width="120" height="90" alt ="Click to enlarge" />
</a> </TD>
<TD WIDTH="20%">
<a href="15.jpg"Name="Viewer1"><img src="15.jpg" onError="FillBlank(14)" width="120" height="90" alt ="Click to enlarge"
/></a> </TD>
</TR>
</TABLE>

<Script language="JavaScript">
var PixCount = document.images.length;
</Script>

</Body>
</HTML>

2. Save the file with a name of your choosing, making sure to give it the .html extension.

3. Use NotePad to create an HTML file which contains the following:

<HTML>
<BODY onLoad="ToFront()">
<Img SRC = "pausemsg.gif">
<script language="javascript">
function ToFront(){
window.focus();
}
</script>

</Body>
</HTML>

4. Save this file as PauseMsg.html.

5. There are three files attached:

1. 640x480 image named PauseMsg.gif
2. PauseBtn.gif
3. BlankMsg.jpg

All of these are required for the SlideShow to function properly.

6. Copy your photos to the same folder that contains the above files, and giving them consecutive names, e.g. 1.jpg, 2.jpg, etc. You must not skip any number, and you must not use a leading zero.

7. Use it!

mjh.lkwd@highstream.net

Sorry, no files are attached, but you get the idea.