PDA

View Full Version : DD Fadeinslideshow



Semster
03-21-2006, 12:48 PM
Script:
DD Fadeinslideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I was wondering. can u set a first delay. Then i mean, if u have 3 slideshows next to eachoter. The first starts to fade in. I want to set the delay time for all 3 the same but the second slideshow has to start fading slightly later end the third later then 2nd.

So the delay time is with all the images the same but i want them not to fade at the same time.

Do u get what i mean?

Greetz,

Semster

jscheuer1
03-21-2006, 03:49 PM
Script:
DD Fadeinslideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I was wondering. can u set a first delay. Then i mean, if u have 3 slideshows next to eachoter. The first starts to fade in. I want to set the delay time for all 3 the same but the second slideshow has to start fading slightly later end the third later then 2nd.

So the delay time is with all the images the same but i want them not to fade at the same time.

Do u get what i mean?

Greetz,

Semster

Not really. Each show can have a delay between images that is different. Also, each show probably could be set, using a setTimeout() to start at different times. Additionally, each show could have one or more transparent images at its beginning, thereby delaying its apparent start. But, no, I don't understand what you are trying to do.

Semster
03-23-2006, 11:19 AM
I think u know where im heading for.

I want the images to fade after 6 seconds. The second image should fade 2 seconds after the first one and the third after 4 seconds.

So from the start of counting, the first image fades at 0, 6, 12 secs and so on. The second image fades at 2, 8, 14 secs and so on. And the third at 4, 10, 16 secs and so on.

And at 0 seconds i want all three images showing the first picture.

So what u were suggesting, a timeout, would probably be the awnser. But where do i implement that?

Thanks in advance.

Semster

jscheuer1
03-23-2006, 10:22 PM
I'm still a little unclear but have worked it out two ways:

1 ) The shows all display their first image on page load, 6 seconds after load the first show fades to its next image, 8 seconds after load the second show fades to is next image, 10 seconds after load the third show fades to its second image. From there on out each show is fading to its next image at 6 second intervals but, since they started staggered at 2 second intervals, they remain staggered.

2 ) The shows all display their first image on page load, 1/10th of a second after load the first show fades to its next image, 2&1/10th of a seconds after load the second show fades to is next image, 4&1/10th of a seconds after load the third show fades to its second image. From there on out each show is fading to its next image at 6 second intervals but, since they started staggered at 2 second intervals, they remain staggered.

From your description I can imagine other ways and whether it is 1/10th of a second (almost no time), 6 seconds or some other figure initially should be no problem. I'm just not clear on what you envision happening. Here are the code updates (second method in use here):

Add to the function fadeshow (addition red):


function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.firsttime=0
this.pausecheck=pause
this.mouseovercheck=0
thi . . .

Replace the fadeshow.prototype.rotateimage=function() with this one (additions red, important values green):


fadeshow.prototype.rotateimage=function(){
if(this.firsttime)
this.delay=6000
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
if(this.slideshowid>0&&this.firsttime==1){
var cacheobj2=this
setTimeout(function(){cacheobj2.rotateimage()}, this.slideshowid*2000)
this.firsttime++
}
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
if (this.firsttime<2)
this.firsttime++
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

Now, (times in 1/1000th of a second) the 6000 in the above is the delay between each image fade/change for all shows once things are fully underway. The 2000 is the incrementing delay between each successive show before it starts its initial fade/change. It will be 0 for the first, 1 times this value for the second 2 times for the third. If there were a fourth show, it would be 3 times the value.

Finally, in the show calls:


new fadeshow(fadeimages, 140, 225, 0, 100, 0)
new fadeshow(fadeimages2, 140, 225, 0, 100, 0)
new fadeshow(fadeimages3, 140, 225, 0, 100, 0)

The green number in each (probably set to the same value in each for your purposes) used to be the delay between images for that particular show. It is now only the delay between when the show's first image loads and its initial delay before its starting delay (the multiple of 2000 from the above). The actual delay between images value has been coopted by the 6000 value from above, which sets it for all three shows. If you want the first method (number 1 at the top of this post) or a different value change 100 in the show calls to 6000 or to whatever you like.

Semster
03-28-2006, 10:54 AM
Thnx!

It totally worked out!

You have been very helpfull.

Greetings