PDA

View Full Version : Swiss Army Slideshow - Modifying fade



pinkshiro
10-15-2007, 01:27 AM
1) Script Title: Swiss Army Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...army/index.htm

3) Describe problem:

Not a problem per sey. But is it possible to do the following.

(i)Would I be able to set the swiss army slideshow to fade the first image all the way out before the next one fades all the way in? So img 1 fades all the way to zero before img 2 begins to fade in?

(ii)Is it possible to set the first image in the array to not fade in when you first go to the page? Then all subsequent images fade in?

And if these two are not possible:

(iii) How can I lengthen the fade time? Not the delay between fades, but the length of the fade...?

jscheuer1
10-15-2007, 03:51 AM
i) To get that effect, simply place a solid color (that matches the background color) image in between them in the array. This 'dummy' image may even be removed from the array after it is used the first time, if desired.

ii) http://www.dynamicdrive.com/forums/showpost.php?p=111669&postcount=5 Some tweaking may be needed, depending upon your other requirements for the show(s) using this effect.

iii) The fade rate is controlled here:


inter_slide.prototype.fadepic=function(){
if (this.fade&&this.degree<100){
this.faded=0
this.degree+=10
if (this.tempobj.filters&&this.tempobj.filters[0]){
if (typeof this.tempobj.filters[0].opacity=="number") //if IE6+
this.tempobj.filters[0].opacity=this.degree
else //else if IE5.5-
this.tempobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (this.tempobj.style.MozOpacity)
this.tempobj.style.MozOpacity=this.degree/101
else if (this.tempobj.style.KhtmlOpacity)
this.tempobj.style.KhtmlOpacity=this.degree/100
else if (this.tempobj.style.opacity&&!this.tempobj.filters)
this.tempobj.style.opacity=this.degree/101
}
else{
this.faded=1
clearInterval(this.fadeclear)
this.nextcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_0" : this.canvasbase+"_1"
this.tempobj=this.go(this.nextcanvas)
if(this.playing)
this.changeimg()
}
}

valid values are 2, 5, 10, and 20. Smaller numbers are slower. And here:


this.fadeclear=setInterval(function(){fadeobj.fadepic()},50)

Use 20 or larger. Smaller numbers are faster. Some trial and error with various combinations of both values will likely be required to achieve both the desired speed and smoothness.

Please Note: When tweaking the fade rate in this manner, care should be taken not to have a fade rate that is longer than the interval between images.

pinkshiro
10-15-2007, 08:42 PM
Thanks a bunch

*e-hand shake*