Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Slideshow: How to slow down transition effect?

  1. #1
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slideshow: How to slow down transition effect?

    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

  2. #2
    Join Date
    Aug 2005
    Posts
    40
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    <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>

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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:

    Code:
    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.
    Last edited by jscheuer1; 04-05-2006 at 07:07 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    --Will

  5. #5
    Join Date
    Apr 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default slow down fade but start with full opacity

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by kukuzurr View Post
    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:

    Code:
    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:

    Code:
    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    new fadeshow(fadeimages2, 140, 225, 0, 5000, 0)
    Now, if you want to delay the start by another 5 seconds, find these two lines:

    Code:
    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    Change them to:

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •