/    Sign up×
Community /Pin to ProfileBookmark

Slideshow – auto/stop function

Copy linkTweet thisAlerts:
Jul 19.2003

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

[color=Red]<SCRIPT LANGUAGE=”JavaScript”>
<!– Original: Mike Canonigo ([email protected]) –>
<!– Web Site: [url]http://www.munkeehead.com[/url] –>

<!– 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>
[/color]

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@AdamBrillJul 19.2003 — Try this:&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original: Mike Canonigo ([email protected]) --&gt;
&lt;!-- Web Site: <a href="http://www.munkeehead.com">http://www.munkeehead.com</a> --&gt;

&lt;!-- This script and many more are available free online at --&gt;
&lt;!-- The JavaScript Source!! --&gt;

&lt;!-- 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 &gt; ImgLength) {
ImgNum = 0;
}
if (ImgNum &lt; 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 --&gt;
&lt;/script&gt;
I didn't test it, but it should work fine. Let me know if you have any problems with it. ?
Copy linkTweet thisAlerts:
@robsta117authorJul 19.2003 — 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
Copy linkTweet thisAlerts:
@robsta117authorJul 20.2003 — 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


[COLOR=orangered]<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 ([email protected]) -->

<!-- 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>[/COLOR]
Copy linkTweet thisAlerts:
@AdamBrillJul 20.2003 — 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. ?
Copy linkTweet thisAlerts:
@robsta117authorJul 20.2003 — 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 ?
    • Copy linkTweet thisAlerts:
    @AdamBrillJul 20.2003 — Attachments via U2U? What is U2U? ? You can attach it on this forums... Otherwise you can e-mail mail me [[email protected]]here[/EMAIL]...
    Copy linkTweet thisAlerts:
    @robsta117authorJul 20.2003 — I sent the zipped file to your e-mail;

    Look forward to getting your feedback.

    Thanks!

    Robsta

    ?
    Copy linkTweet thisAlerts:
    @robsta117authorJul 21.2003 — hey Adam -

    I sent you a Personal Message.

    ? Robsta
    Copy linkTweet thisAlerts:
    @robsta117authorJul 22.2003 — 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 ?
    Copy linkTweet thisAlerts:
    @AdamBrillJul 22.2003 — No problem. I'm glad you got it working. ?
    ×

    Success!

    Help @robsta117 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...