PDA

Click to See Complete Forum and Search --> : more than one slideshow script

rocketscience
10-12-2004, 01:06 AM
Hello, I have a slideshow on my site that I am working on-
http://www.photogoose.com

however, I need to have the show run in each of the 3 image frames, any suggestions?

Another thing I want to do is add a random image effect to the slideshow, such as I have at:
http://home.earthlink.net/~rsfoto/Untitled-2.htm

but still keep the fade effect.

Thanks for the help.
Warren86
10-12-2004, 08:26 AM
<HTML>
<Head>
<Script Language=JavaScript>

var slideShowSpeed1 = 5000;
var slideShowSpeed2 = 5000;
var slideShowSpeed3 = 5000;
var crossFadeDuration1 = 3;
var crossFadeDuration2 = 3;
var crossFadeDuration3 = 3;

var currIMG1 = 0;
var currIMG2 = 0;
var currIMG3 = 0;

var Pic1 = new Array()
Pic1[0] = 'slideshow1_1.jpg'
Pic1[1] = 'slideshow1_2.jpg'
Pic1[2] = 'slideshow1_3.jpg'
Pic1[3] = 'slideshow1_4.jpg'


var nPix1 = Pic1.length-1;
var preLoad1 = new Array()
for (i=0; i<nPix1+1; i++)
{
preLoad1[i] = new Image()
preLoad1[i].src = Pic1[i]
}

var Pic2 = new Array()
Pic2[0] = 'slideshow2_1.jpg'
Pic2[1] = 'slideshow2_2.jpg'
Pic2[2] = 'slideshow2_3.jpg'
Pic2[3] = 'slideshow2_4.jpg'

var nPix2 = Pic2.length-1;
var preLoad2 = new Array()
for (n=0; n< nPix2+1; n++)
{
preLoad2[n] = new Image()
preLoad2[n].src = Pic2[n]
}

var Pic3 = new Array()
Pic3[0] = 'slideshow3_1.jpg'
Pic3[1] = 'slideshow3_2.jpg'
Pic3[2] = 'slideshow3_3.jpg'
Pic3[3] = 'slideshow3_4.jpg'

var nPix3 = Pic3.length-1;
var preLoad3 = new Array()
for (t=0; t<nPix3+1; t++)
{
preLoad3[t] = new Image()
preLoad3[t].src = Pic3[t]
}

function runSlideShow1(){
SlideShow1.style.filter="blendTrans(duration=2)";
SlideShow1.style.filter="blendTrans(duration=crossFadeDuration1)";
SlideShow1.filters.blendTrans.Apply();
SlideShow1.src = preLoad1[currIMG1].src;
SlideShow1.filters.blendTrans.Play();
currIMG1++
if (currIMG1 > (nPix1)){currIMG1=0}
setTimeout('runSlideShow1()',slideShowSpeed1);
}

function runSlideShow2(){
SlideShow2.style.filter="blendTrans(duration=2)";
SlideShow2.style.filter="blendTrans(duration=crossFadeDuration2)";
SlideShow2.filters.blendTrans.Apply();
SlideShow2.src = preLoad2[currIMG2].src;
SlideShow2.filters.blendTrans.Play();
currIMG2++
if (currIMG2 > (nPix2)){currIMG2=0}
setTimeout('runSlideShow2()',slideShowSpeed2);
}

function runSlideShow3(){
SlideShow3.style.filter="blendTrans(duration=2)";
SlideShow3.style.filter="blendTrans(duration=crossFadeDuration3)";
SlideShow3.filters.blendTrans.Apply();
SlideShow3.src = preLoad3[currIMG3].src;
SlideShow3.filters.blendTrans.Play();
currIMG3++
if (currIMG3 > (nPix3)){currIMG3=0}
setTimeout('runSlideShow3()',slideShowSpeed3);
}

function checkState(){
if (document.readyState == "complete")
{
runSlideShow1();
runSlideShow2();
runSlideShow3();
}
else{setTimeout("checkState()",500)}
}
</Script>
<Style>
.1 {Position:Absolute;Top:15px;Left:20px}
.2 {Position:Absolute;Top:175px;Left:20px}
.3 {Position:Absolute;Top:335px;Left:20px}
</Style>
</Head>
<Body>
<Div class=1>
<img src="slideshow1_1.jpg" id='SlideShow1' width=150 height=150>
</Div>
<Div class=2>
<img src="slideshow2_1.jpg" id='SlideShow2' width=150 height=150>
</Div>
<Div class=3>
<img src="slideshow3_1.jpg" id='SlideShow3' width=150 height=150>
</Div>
<Script>
checkState();
</Script>
</Body>
</HTML>
JPnyc
10-12-2004, 08:32 AM
You should be aware, however, that they can't truly run simultaneously. A browser and it's JS engine is a single threaded app. When one is actually running the script, the other 2 won't be. The only way to get them to change simultaneously is to have one function but change 3 pics at once.
rocketscience
10-12-2004, 04:36 PM
HI, exceelent, that works well. However what I really want is to have each of the frames run independantly of eachother- rather than together.

I tried adding a delay, wich worked for the first image, but the 2nd transistion was paced with the other 2 frames- if that makes sense.

I also tried changing the slide show speed, I made the 1st at 4000, 2nd at 6000 and the 3rd at 8000, which works more the way I want, hoever is there a more effective method?

Thanks
rocketscience
10-12-2004, 05:21 PM
I got it working pretty well, you can check out the site if you like
http://www.photogoose.com

I would like to have the slideshow speed differ from the amount of time to start it? I would like to have the slideshow start sooner- yet keep the slideshow speed.
Any ideas on that?

One other question for Warren, does that code preload the images?

Thanks a lot
Warren86
10-12-2004, 05:39 PM
rocketscience:
Yes, it preloads the images, and you already have the code working the best it can. I've provided it to at least 6 others and your page looks very good, as well. All you did was post a question on a forum and you promptly received free code that is working well. Not enough?
rocketscience
10-12-2004, 09:02 PM
I apologize if I seemd unappreciative, or greedy, I do thank you for the code. I guess I just got excited.