Slideshow: How to slow down transition effect?

[Will]

Hi,

I just downloaded and installed the ultimate slideshow http://www.dynamicdrive.com/dynamici...nslideshow.htm and it works well for my needs.

However, I would like to slow down the pace of the fade effect itself. Not the time betweentransitions (default 3000), but the actual fade. Is there a way to do this?

Thanks,

--Will

[skilled1]

the default is 3000 that is miliseconds so you are looking at about 3 seconds each try moving that to say 5000 for 5 seconds and so on so forth

ie

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 140, 225, 0, 5000, 1, "R")
new fadeshow(fadeimages2, 140, 225, 0, 5000, 0)
 
</script>

[jscheuer1]

I don't think that was the question. The rate of fade rather than the time between image changes is at issue. This is governed by the increment added for each iteration of the fadepic(obj) function and/or by its rate of interval. There are some important considerations. Whatever this increment is, the length of time for an image to fade in must not becaome greater than the length of time between images. Also, if the increment itself is adjusted, it must still be an amount that will add up eventually to 100, otherwise opacity values may creep out of any meaningful range over time as the script runs. There are two ways to adjust the fade rate, adjust the increment here in fadepic(obj):

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tem . . .

You could change 10 to 5 (an even number divisor for 100, like 10 or 4 or 2 or 1, but not 3, for example). Depending upon where opacity starts, 5 and 1 may be the only suitable alternative values. The other spot is where fadepic is called, here:

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
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"
}
else{ . . .

If 50 is increased, it will prolong the fade effect but, too much of an increase will lead to a choppy transition.

[Will]

Thank you for the quick reply! I'm going to try that out right now.

--Will

[Will]

I just tried it, with the first number set to 5, the second to 70, and the fade is nice and slow(er) to suit my tastes. I ended up increasing the time between images to 6 seconds as well. And I took the initial opacity up to 90, which seemed to also affect how the next picture fades in (but that may be in my head--I'll have to watch ti for a while to see).

Thanks again,

--Will

[kukuzurr]

Hello !

The solution works for me very well, however, I would like to start (first time the page is loaded) with the real picture (not fade in) and then let the fade run.

Is there a way to do this?

many thanks in advance
kukuzurr

[jscheuer1]

Hello !

The solution works for me very well, however, I would like to start (first time the page is loaded) with the real picture (not fade in) and then let the fade run.

Is there a way to do this?

many thanks in advance
kukuzurr

Replace:

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else

With:

if (iebrowser&&dom||dom) {//if IE5+ or modern browsers (ie: Firefox)
var slideHTML=""
if (this.theimages[0][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[0][1]+'" target="'+this.theimages[0][2]+'">'
slideHTML+='<img src="'+this.postimages[0].src+'" border="'+this.imageborder+'px">'
if (this.theimages[0][1]!="") //if associated link exists for image
slideHTML+='</a>'
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);opacity:1;-moz-opacity:1;-khtml-opacity:1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);opacity:1;-moz-opacity:1;-khtml-opacity:1;background-color:'+fadebgcolor+'">'+slideHTML+'</div></div>')
}
else

[kukuzurr]

Great !

Is there a way to delay the fade - effect? (e.g. see the picture for 10 seconds, then start fading with 5 seconds for each picture)

many thanks
kukuzurr

[jscheuer1]

Well, you already have the ability to control the time between the images, the "fading with 5 seconds for each picture" would be the delay:

new fadeshow(fadeimages2, 140, 225, 0, 5000, 0)

Now, if you want to delay the start by another 5 seconds, find these two lines:

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()

Change them to:

var cacheObj = this;
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
setTimeout(cacheObj.startit, this.delay);

Or, if you want a custom delay before start, use a custom number:

var cacheObj = this;
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
setTimeout(cacheObj.startit, 5000);

Just remember that, since we are showing the first image as solid, with no fade in, it should represent a delay equal to the existing delay, so whatever you put in the above code would be added to the existing delay to equal the initial delay. At least that's how I figure it. In any case, as I say, you can always use a custom number there to get the precise initial delay you might want.

[kukuzurr]

Thank you John !

Sorry fo not being more precise.

Here is the problem:

On www.ternitzmusicclub.at/VMITest I have got 7 pictures in one row, and I wanted to first change the 1st picture, then (e.g. after 5 seconds) change the second, then the 3rd and so on...

After all pictures have been changed it would start from the beginning.

So, the delay time would be all the same (for instance 8 seconds), but each picture would start at another time after loading (so there would never be 2 or more pictures changing at the same time).

best regards
kukuzurr