PDA

View Full Version : Slideshow - auto/stop command

robsta
07-19-2003, 03:32 AM
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!! http://javascript.internet.com -->

<!-- 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>
Mr J
07-19-2003, 07:59 AM
Would you like to try this one



<HTML><HEAD><TITLE>Document Title</TITLE></HEAD><BODY>

<SCRIPT language="javascript">
<!--
// Realised by apache jeff
// www.huntingground.freeserve.co.uk
newTrans=new Array()
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.Slide(bands=1, slidestyle='push')";
//newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.Spiral()";

pics=new Array()
pics[pics.length]="pic1.jpg"
pics[pics.length]="pic2.jpg"
pics[pics.length]="pic3.jpg"
pics[pics.length]="pic4.jpg"
pics[pics.length]="pic5.jpg"
pics[pics.length]="pic6.jpg"

var preloadpics=new Array() // preloads images
for (i=0;i<=pics.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=pics[i]
}

var tranSpeed = 2.0; // how long transition takes in seconds
var pause = 1000 // in milliseconds
var advance = (tranSpeed*1000)+pause //
var Running = 0;
var i=0
var picnum1=1

function RunMe(){
if (Running == 1){return}
Running = 1;

divA.style.filter = newTrans[i];
divA.filters[0].apply();
divA.innerHTML = "<img src='"+pics[picnum1]+"'width='"+document.all.divA.style.width+"'height='"+document.all.divA.style.height+"'>"
divA.filters[0].play(tranSpeed);

if(i==newTrans.length-1){
i=-1}
if(picnum1==pics.length-1){
picnum1=0
}
picnum1++
i++
setTimeout("Running=0;setTimeout('auto()',2000)",tranSpeed*1000)
}

aut=0
function auto(){
if(aut==0){return}
RunMe()
}

timer_auto=""
function oback(){
aut=0
picnum1=picnum1-2

if(picnum1== -1){
picnum1=1
return
}

RunMe()
}


var b=0
function dualButt(){
b++
if (b==1){
one()
document.f1.b2.value="Stop"
document.f1.b1.disabled=true
document.f1.b3.disabled=true
}
else
if (b==2){
two()
document.f1.b2.value="Auto"
document.f1.b1.disabled=false
document.f1.b3.disabled=false
b=0
}

}

function one(){
auto(aut=1)
}

function two(){
auto(aut=0)
}


// -->
</SCRIPT>
<center>
<DIV id=divA onfilterchange="" style="width:100; height:100; filter(); border:5 inset blue;cursor:hand;background-color:black" ><img src="pic1.jpg" width=100 height=100>
</DIV>
<form name="f1">
<input type="button" name="b1" value="<<<" onclick="oback()">
<input type="button" name="b2" value="Auto" onclick="dualButt()">
<input type="button" name="b3" value=">>>" onclick="RunMe()">
</form>
</center>
</BODY>
</HTML>
robsta
07-19-2003, 05:30 PM
Hi Mr. J -

Thanks a lot for the script - I'll give it a go and let you know how it turns out.

Robsta
:thumbsup:
Mr J
07-19-2003, 06:58 PM
If it is alright for you I will post you an updated version as I have just noticed that is IE4 oriented.
robsta
07-19-2003, 10:01 PM
Hi -

Sure that's fine.
Mr J
07-22-2003, 10:18 AM
Sorry for the delay, the update just make it IE5.5+ and NS6+ compatible.
The filter effects don't work in NS but it is an acceptable degrade



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<SCRIPT language="javascript">
<!--
// Realised by apache jeff
// www.huntingground.freeserve.co.uk
var ns=document.getElementById&&!document.all
newTrans=new Array()
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.Slide(bands=1, slidestyle='push')";
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.Spiral()";

pics=new Array()
pics[pics.length]="pic1.jpg"
pics[pics.length]="pic2.jpg"
pics[pics.length]="pic3.jpg"
pics[pics.length]="pic4.jpg"


var preloadpics=new Array() // preloads images
for (i=0;i<=pics.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=pics[i]
}

var tranSpeed = 2.0; // how long transition takes in seconds
var pause = 1000 // in milliseconds
var advance = (tranSpeed*1000)+pause //
var Running = 0;
var i=0
var picnum1=1

function RunMe(){
div_A=document.getElementById("divA")
if (Running == 1){return}
Running = 1;

if(!ns){
div_A.style.filter = newTrans[i];
div_A.filters[0].apply();
}
div_A.innerHTML = "<img src='"+pics[picnum1]+"'width='"+div_A.style.width+"'height='"+div_A.style.height+"'>"
if(!ns){
div_A.filters[0].play(tranSpeed);
}
if(i==newTrans.length-1){
i=-1}
if(picnum1==pics.length-1){
picnum1=0
}
picnum1++
i++
setTimeout("Running=0;setTimeout('auto()',2000)",tranSpeed*1000)
}

aut=0
function auto(){
if(aut==0){return}
RunMe()
}

timer_auto=""
function oback(){
aut=0
picnum1=picnum1-2

if(picnum1== -1){
picnum1=1
return
}

RunMe()
}

var b=0
function dualButt(){
b++
if (b==1){
one()
document.f1.b2.value="Stop"
document.f1.b1.disabled=true
document.f1.b3.disabled=true
}
else
if (b==2){
two()
document.f1.b2.value="Auto"
document.f1.b1.disabled=false
document.f1.b3.disabled=false
b=0
}

}

function one(){
auto(aut=1)
}

function two(){
auto(aut=0)
}

// -->
</SCRIPT>
</HEAD>
<BODY>
<center>
<DIV id="divA" onfilterchange="" style="width:100px; height:100px; filter(); border:5px inset blue;cursor:hand;background-color:black" ><img src="pic1.jpg" width=100px height=100px>
</DIV>
<form name="f1">
<input type="button" name="b1" value="<<<" onclick="oback()">
<input type="button" name="b2" value="Auto" onclick="dualButt()">
<input type="button" name="b3" value=">>>" onclick="RunMe()">
</form>
</center>

</BODY>
</HTML>
robsta
07-22-2003, 04:21 PM
Hi there -

Thanks a lot for getting back to me and for the script.

I'm looking fwd to giving it a spin.

I'll let you know how it turns out.

All the best -

Robsta
:thumbsup:
beetle
07-22-2003, 04:28 PM
I've got an an OO Slideshow script (http://www.peterbailey.net/dhtml/oo_slideshow.htm) that you're welcome to check out.
robsta
07-23-2003, 01:45 AM
Hi Mr. J -

Tried sending you zipped file - size exceeds forum limit.

I'll try sending you c/o your web site e-mail address.

If you don't get anything from me, please send me an e-mail address I can reach you at via Personal Message.

Thanks - Robsta
:)
robsta
07-23-2003, 08:57 PM
Just letting other forum members know that the problem was solved. Thanks to Mr J for all his help.

He should be posting the script to his site - in the meantime you can send me a personal message if you'd like a copy of the script.

For more techie info, Mr J's the one you'll need to talk to.

Robsta :)