Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Fading image question

    Hello

    I am using JS here:

    http://www.proofreading4students.com/fadeImage.html

    I have made a slight modification to the original script by simply adding this to the array:
    Code:
    img_array[3]="test4.jpg";
    img_array[4]="test5.jpg";
    and changing default.png to test1.jpeg. In fact, I have changed all image formats from png to jpeg.

    It looks as if the image fade falters and jumps about - is there a better, more stable way of doing this, please?

    Thanks

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    The method you are using uses just one image tag for rendering the image, and fades it out progressively to zero opacity (in terms of what you see, to its parent's background color), then fades in the new image. If the parent's background color is white, you'll get a white transition between images.

    Apart from that, the slight jerkiness in that script is due to the incremental steps involved in the opacity animation. If you have steps = 15, then in that script, each step is 100/15 (rounded), which is 7 units. So you can improve it a bit by trying step values of perhaps 20, 25, or 50 (instead of 15), which make the increment smaller. You could also try changing the line:

    Code:
    if(n==steps+1){
        n-=2;
    to:

    Code:
    if(n==steps+1){
        n-=1;
    By the way, there's a couple of glitches or typos in the markup and styles:

    Code:
    <img src="test1.psd"
    Code:
    background-image:url(http://www.geocities.com/caulolli/taylor.png) no-repeat;
    Browsers don't read Photoshop .psd files. And the geocities domain is long gone.


    Smoother opacity transitions use different ways of handling the transition. Many use two rendering surfaces - e.g. 2 image elements, one on top of the other. Or sometimes a div or other element is used as the lower element, whose background-image property is used. A new image source is applied to the top element, then its opacity is incremented from 0 to 1.0, and over the previous image (in the lower element). So the new image comes in smoothly, with no fadeout to the background color in between. There are quite a few such examples around; here is one tutorial example:
    http://www.cryer.co.uk/resources/jav...2slideshow.htm

    There are many interesting image transition types here:
    http://www.brothercake.com/site/reso...s/transitions/

  • Users who have thanked auslin for this post:

    SteveH (06-23-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello auslin

    Very many thanks for your valuable and informative reply.

    I have taken on board the amendments you suggested (replaced the geocities link, corrected all files to jpeg, altered the time sequence, etc) but the image transition still has that 'shaky' look.

    I will take a look at the links you have posted.

    Thanks again.

    Steve

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,517
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <img id="tst" src="http://www.proofreading4students.com/test1.jpg" onmouseover="zxcFadePause('tst');" onmouseout="zxcFadeAuto('tst');" />
    <img id="tst2" src="http://www.proofreading4students.com/test1.jpg" onmouseover="zxcFadePause('tst2');" onmouseout="zxcFadeAuto('tst2');" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcFade(o){
     var id=o.ID,img=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hin=o.HoldIn,hout=o.HoldOut,ary=o.SRCArray,srcs=[],nimg,z0=0;
     for (;z0<ary.length;z0++){
      srcs[z0]=new Image();
      srcs[z0].src=ary[z0];
     }
     zxcFade['zxc'+id]={
      id:id,
      img:img,
      srcs:srcs,
      ms:ms,
      hin:typeof(hin)=='number'?hin:ms*2,
      hout:typeof(hout)=='number'?hout:50,
      cnt:0
     }
     zxcFadeAuto(id)
    }
    
    function zxcFadeAuto(id,ms){
     var o=zxcFade['zxc'+id];
     if (o){
      o.to=setTimeout(function(){ o.auto=true; animate(o,o.img,100,0,new Date(),o.ms); },ms||200);
     }
    }
    
    
    function zxcFadePause(id){
     var o=zxcFade['zxc'+id];
     if (o){
      o.auto=false;
      clearTimeout(o.to);
     }
    }
    
    function animate(o,obj,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      obj.style.filter='alpha(opacity='+now+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
     }
     if (ms<mS){
      o.dly=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS); },10);
     }
     else {
      if (t==0){
       o.cnt=++o.cnt%o.srcs.length;
       obj.src=o.srcs[o.cnt].src;
       setTimeout(function(){ animate(o,o.img,0,100,new Date(),o.ms); },o.hout);
      }
      else if (o.auto){
       zxcFadeAuto(o.id,o.hin);
      }
     }
    }
    
    zxcFade({
     ID:'tst',           // the unique ID name of the image.                            (string)
     SRCArray:[          // an array of the file path and name of the images.           (string)
      'http://www.proofreading4students.com/test1.jpg',
      'http://www.proofreading4students.com/test2.jpg',
      'http://www.proofreading4students.com/test3.jpg',
      'http://www.proofreading4students.com/test4.jpg',
      'http://www.proofreading4students.com/test5.jpg'
     ],
    // FadeDuration:1000,  //(optional) the fade duration in milliseconds.                (number, default = 1000)
     HoldIn:1000,        //(optional) the fade in hold duration in milliseconds.        (number, default = FadeDuration*2)
     HoldOut:100         //(optional) the fade out hold duration in milliseconds.       (number, default = 50)
    });
    
    zxcFade({
     ID:'tst2',
     SRCArray:[
      'http://www.proofreading4students.com/test1.jpg',
      'http://www.proofreading4students.com/test2.jpg',
      'http://www.proofreading4students.com/test3.jpg',
      'http://www.proofreading4students.com/test4.jpg',
      'http://www.proofreading4students.com/test5.jpg'
     ]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 06-23-2012 at 01:42 PM. Reason: added second example
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    SteveH (06-23-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Wow

    Thanks for that Vic, I will try it this afternoon!

    Thanks for your work and effort.

    I noticed you changed the doc. type.

    Steve


  •  

    Posting Permissions

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