PDA

View Full Version : Slideshow: How to slow down transition effect?



Will
04-04-2006, 09:24 PM
Hi,

I just downloaded and installed the ultimate slideshow http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
04-04-2006, 10:22 PM
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
04-05-2006, 06:00 AM
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
04-05-2006, 03:17 PM
Thank you for the quick reply! I'm going to try that out right now.

--Will

Will
04-05-2006, 03:52 PM
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
10-21-2008, 01:41 PM
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
10-21-2008, 03:56 PM
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
10-28-2008, 02:24 PM
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
10-28-2008, 03:40 PM
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
10-28-2008, 04:06 PM
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

jscheuer1
10-28-2008, 05:31 PM
See this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=9450

particularly from post #14. Be sure to read from at least there to the end #20, as after introducing the modified 'stagger' version of the script, it is improved and explained.

kukuzurr
10-28-2008, 08:00 PM
hmm, for some reason the fading does not start at all with the new code...

best regards
kukuzurr

jscheuer1
10-29-2008, 04:36 AM
Your demo page isn't using the 'stagger' script, so I cannot see what the trouble is. If you want to stick with the script we were modifying, instead of changing:


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

to:


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

change it to:


var cacheObj = this;
typeof fadeshow.added != 'number'? fadeshow.added = 0 : fadeshow.added += 5000;
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
setTimeout(cacheObj.startit, fadeshow.added);

5000 will be the incremental delay between the start of each subsequent slide show.

kukuzurr
10-29-2008, 03:15 PM
Thanks again John!

http://www.ternitzmusicclub.at/VMITest/index.html
Now I implemented the stagger script and it seems nearly perfect for me!

However, one wants allways more ;)

1) I noticed that with this script it takes a little longer until the page is loaded (or not?)

2) What I would like to achive is that only one picture changes at any one time in regular intervals. E.g. when I set the stagger to 5 seconds and the delay to 35 seconds that works perfectly (with 7 pictures). Only problem is that it also takes 35 seconds until the first picture fades! (and then every 5 seconds one of the other pictures follows as intended and the world is perfect again)

best regards
kukuzurr

jscheuer1
10-29-2008, 05:20 PM
I think that's because you have such a long delay for each show, which is fine if you want it, but makes them all wait that long before doing anything. However, the stagger script has an allowance for that, here:


this.delayf=delay
this.delay=delay/2

I figured that for most setups like this, the initial delay should be half that set for each slide show initially. Obviously this doesn't speed things up enough for your situation. I played with it and 500 seems to work out:


this.delayf=delay
this.delay=500

Basically what this does is allows each show to transition almost precisely when loaded and after its stagger waiting period has expired, and then to transition according to the delay set for that show (which was stored in this.delayf). I tried 0, and even 100, but it wasn't enough time to allow for any fading.

kukuzurr
10-29-2008, 05:40 PM
Thanks again, I will play around with it !

Is there a way to change the order, e.g. if I want to first fade pic#1 then pic#4 then pic#2 and so on...

regards
kukuzurr

jscheuer1
10-30-2008, 04:37 AM
Is there a way to change the order, e.g. if I want to first fade pic#1 then pic#4 then pic#2 and so on...

I don't think you mean that, at least not literally. If you do, just change the order of the images in a given array. I think what you mean is run the first slide show then the fourth, then the second, and then . . .

If what I'm thinking is the case, yes - that can be done. Replace:


function startAll(){
var ready=0
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
ready+=fadearray[i_tem].readyFlag? 1 : 0;
if (ready==fadearray.length)
for (i_tem = 0; i_tem < fadearray.length; i_tem++){
if (stagger){
setTimeout("fadearray["+i_tem+"].startit()", stagger*i_tem)
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000+stagger*i_tem)
}
else {
fadearray[i_tem].startit()
setTimeout("document.getElementById('temp"+i_tem+"').style.display='none'", 1000)
}
}
else
setTimeout("startAll()",300)
}

with:


function startAll(){
var ready=0, shows = [0,3,1,4,6,5,2];
for (var i_tem = 0; i_tem < fadearray.length; i_tem++)
ready+=fadearray[i_tem].readyFlag? 1 : 0;
if (ready==fadearray.length)
for (i_tem = 0; i_tem < fadearray.length; i_tem++){
if (stagger){
setTimeout("fadearray["+shows[i_tem]+"].startit()", stagger*i_tem) //+1?
setTimeout("document.getElementById('temp"+shows[i_tem]+"').style.display='none'", 1000+stagger*i_tem)
}
else {
fadearray[shows[i_tem]].startit()
setTimeout("document.getElementById('temp"+shows[i_tem]+"').style.display='none'", 1000)
}
}
else
setTimeout("startAll()",300)
}

With the modified startAll() function above, now let's zoom in on this part (be aware, I've also changed other parts of the startAll() function, this below is the changed part that you can configure):


shows = [0,3,1,4,6,5,2];

In javascript, numbering usually starts at 0 and goes to 1 less than the number of things. So 0 would be the first of (in this case seven) and 6 would be the last of (also in this case) seven.

So the above would run the first, fourth, second, fifth, seventh, sixth, and third slide shows in that order. By rearranging the numbers, different orders may be set.

Note: This is a specific configuration for a page with 7 slide shows, and therefore is the first of the modifications to the script that we've been discussing that cannot be applied in at least some sort of general way to various different setups. It requires 7, and only 7 slide shows.

kukuzurr
10-30-2008, 03:07 PM
Wow !

Not only you are a human code generating machine, you also can read minds ;-)

many thanks
kukuzurr