PDA

Click to See Complete Forum and Search --> : Slideshow - auto/stop function

robsta117
07-18-2003, 09:45 PM
Hi -

How can I split the AUTO/STOP function into two separate functions: RUN and STOP in the script below:

I created a RUN button and a STOP button, and though the slideshow runs nicely with the existing script, it's possible to START the slideshow from the STOP button, and visa versa.

How can I correct this?

All suggestions greatly appreciated.

Thanks -
Robsta

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo (mike@canonigo.com) -->
<!-- Web Site: http://www.munkeehead.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin
// Preload Images
NewImg = new Array (
"imgs/image1.jpg",
"imgs/image2.jpg",
"imgs/image3.jpg",
"imgs/image1on.jpg",
"imgs/image2on.jpg",
"imgs/image3on.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 2500;

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>
AdamBrill
07-18-2003, 10:02 PM
Try this:<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo (mike@canonigo.com) -->
<!-- Web Site: http://www.munkeehead.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin
// Preload Images
NewImg = new Array (
"imgs/image1.jpg",
"imgs/image2.jpg",
"imgs/image3.jpg",
"imgs/image1on.jpg",
"imgs/image2on.jpg",
"imgs/image3on.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 2500;

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 run(){
lock = true;
run = setInterval("chgImg(1)", delay);
}
function stop(){
lock = false;
window.clearInterval(run);
}
}
// End -->
</script>
I didn't test it, but it should work fine. Let me know if you have any problems with it. ;)
robsta117
07-18-2003, 11:18 PM
hello Adam -

Thanks for editing the script - I'll give it a go tomorrow and let you know how it works out.

All the best,
Robsta
robsta117
07-19-2003, 07:26 PM
Hello Adam -

I'm afraid I couldn't get the script to run. Maybe I'm not using the correct onClick commands.

Here's the code for the page - it's a TEST page, so it's not too lengthy.

Any ideas??

Robsta


<html>
<head>
<meta name="linked-style-sheet-name" content="Embedded style sheet">
<meta name="window-location" content="{ 40 4 556 792 }">
<meta name="targetted-browsers" content="NS4.0 NS6 IE4.0 IE5">
<title>*** SLIDESHOW ***</title>
<style type="text/css">
#screen { position: absolute;
top: 92px;
left: 245px;
width: 222px;
height: 150px;
z-index: 2; }

#back { position: absolute;
top: 282px;
left: 176px;
width: 92px;
height: 89px;
z-index: 3; }

#fwd { position: absolute;
top: 282px;
left: 440px;
width: 94px;
height: 90px;
z-index: 4; }

#start { position: absolute;
top: 279px;
left: 316px;
width: 121px;
height: 100px;
z-index: 5; }

#stop { position: absolute;
top: 279px;
left: 266px;
width: 63px;
height: 90px;
z-index: 6; }

#status { position: absolute;
top: 247px;
left: 272px;
width: 160px;
height: 26px;
z-index: 7; }

#frame { position: absolute;
top: 66px;
left: 156px;
width: 400px;
height: 210px;
z-index: 1;
background-color: #000000; }
</style>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo (mike@canonigo.com) -->
<!-- Web Site: http://www.munkeehead.com -->
<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! --> <!-- Begin
// Preload Images
NewImg = new Array (
"imgs/image1.jpg",
"imgs/image2.jpg",
"imgs/image3.jpg",
"imgs/image1on.jpg",
"imgs/image2on.jpg",
"imgs/image3on.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 2500;

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 run(){
lock = true;
run = setInterval("chgImg(1)", delay);
}
function stop(){
lock = false;
window.clearInterval(run);
}
}
// End -->
</script>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Preload Images

var image1 = new Image(); image1.src = "imgs/buttonBackOn.jpg";
var image2 = new Image(); image2.src = "imgs/StartOn.jpg";
var image3 = new Image(); image3.src = "imgs/buttonFwdOn.jpg";
var image4 = new Image(); image4.src = "imgs/StopOn.jpg";
var image5 = new Image(); image5.src = "imgs/running.jpg";

function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</script>

</head>
<body>
<div id="screen"><img name="slideshow" img src="imgs/image1.jpg" width="222" height="149"></div>

<div id="back" onClick="javascript:chgImg(-1)">
<img name="image1" src="imgs/buttonBack.jpg" onMouseDown="movepic('image1','imgs/buttonBackOn.jpg')" onMouseUp="movepic('image1','imgs/buttonBack.jpg')" height="88" width="90" border="0"></div>

<div id="stop" onClick="javascript:stop()">
<img name="image4" src="imgs/Stop.jpg" onMouseDown="image4.src='imgs/StopOn.jpg'; image5.src='imgs/statusblank.jpg';" onMouseUp="image4.src='imgs/Stop.jpg'; image5.src='imgs/statusblank.jpg';" height="90" width="63" border="0"></div>

<div id="start" onClick="javascript:run()">
<img name="image2" src="imgs/Start.jpg" onMouseDown="image2.src='imgs/StartOn.jpg'; image5.src='imgs/running.jpg';" onMouseUp="image2.src='imgs/Start.jpg'; image5.src='imgs/running.jpg';" border="0"></div>

<div id="fwd" onClick="javascript:chgImg(1)">
<img name="image3" src="imgs/buttonFwd.jpg" onMouseDown="movepic('image3','imgs/buttonFwdOn.jpg')" onMouseUp="movepic('image3','imgs/buttonFwd.jpg')" height="88" width="90" border="0"></div>

<div id="frame"></div>

<div id="status"><img name="image5" src="imgs/statusblank.jpg" height="26" width="160" border="0"></div>

</body>
</html>
AdamBrill
07-19-2003, 09:40 PM
Ok... From what I tested, it seemed to work ok. What part wasn't working? Could you zip up the entire page(including images) so I can have a better idea of what is going on? An image rotation script doesn't look like much without the images. ;)
robsta117
07-19-2003, 09:58 PM
Hi -

Yes, I'll zip you the document with all the imgs. Can I send attachment via U2U?

QUOTE:
What part wasn't working?

It wouldn't run!? Could be my coding though.

- Robsta :)
AdamBrill
07-19-2003, 10:03 PM
Attachments via U2U? What is U2U? ;) You can attach it on this forums... Otherwise you can e-mail mail me here (adambrill1986@hotmail.com)...
robsta117
07-19-2003, 10:56 PM
I sent the zipped file to your e-mail;

Look forward to getting your feedback.

Thanks!

Robsta
:)
robsta117
07-21-2003, 06:58 PM
hey Adam -

I sent you a Personal Message.

:) Robsta
robsta117
07-22-2003, 05:20 PM
Hi Adam -

Yey!!! It worked great... after I discovered a coding error of mine.

I had written:

<div id="screen"><img name="slideshow" img src="imgs/image1.jpg" width="222" height="149"></div>

"img" was written twice.

Should have been:

<div id="screen"><img name="slideshow" src="imgs/image1.jpg" width="222" height="149"></div>

Thanks for reworking that script - I'll put <!--edited by AdamBrill--> in the header once I post the slide show. It works nicely.

Muchos gracias!!!
Robsta :)
AdamBrill
07-22-2003, 05:22 PM
No problem. I'm glad you got it working. ;)