www.webdeveloper.com
Results 1 to 8 of 8

Thread: Cycle through images with fade effect.

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    20

    Cycle through images with fade effect.

    Hello all,

    I found the following script that is close to what I was looking for. However I was hoping that someone could help me figure out how to have the image simply fade into the next image instead of fading to white then displaying the next image. Any help would be greatly appreciated!

    JavaScript in Head:
    Code:
    <script type="text/javascript">
    
    function changeImage()
    {
        var img = document.getElementById("img");
        img.src = images[x];
        x++;
    
        if(x >= images.length){
            x = 0;
        } 
    
        fadeImg(img, 100, true);
        setTimeout("changeImage()", 3000);
    }
    
    function fadeImg(el, val, fade){
        if(fade === true){
            val--;
        }else{
            val ++;
        }
    
        if(val > 0 && val < 100){
            el.style.opacity = val / 100;
            setTimeout(function(){fadeImg(el, val, fade);}, 10);
        }
    }
    
    var images = [],
    x = 0;
    
    images[0] = "image1.jpg";
    images[1] = "image2.jpg";
    images[2] = "image3.jpg";
    setTimeout("changeImage()", 3000);
    
    </script>
    Body:
    HTML Code:
    <img id="img" src="startpicture.jpg">

  2. #2
    Join Date
    Oct 2013
    Posts
    20
    Actually, is there a way to make this a background image also? Thanks!

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,313
    Have a look at this http://css3.bradshawenterprises.com/cfimg/ see the demo's
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Oct 2013
    Posts
    20
    That's a very helpful source. Thank you! Now, I'm a novice at CSS (at best), so perhaps you could help me a little...if you could.

    How can I combine these two codes to achieve the effect that I'm going for?

    Here is the full effect that I'm looking to achieve. I want to have images cycle through with the fade effect (these are a link). When you hover over the image area it allows for a dimming effect. All I need to do is have the background image(s) cycle with the fade. I have the other part figured out. It seems like a lot of work, but not so much now that you provided that link. I'm just not proficient enough in CSS yet to make it happen.

    I would really appreciate your help.

    Code:
    @keyframes cf4FadeInOut {
      0% {
        opacity:1;
      }
      17% {
        opacity:1;
      }
      25% {
        opacity:0;
      }
      92% {
        opacity:0;
      }
      100% {
        opacity:1;
      }
    }
    
    #cf4a img:nth-of-type(1) {
      animation-delay: 6s;
    }
    #cf4a img:nth-of-type(2) {
      animation-delay: 4s;
    }
    #cf4a img:nth-of-type(3) {
      animation-delay: 2s;
    }
    #cf4a img:nth-of-type(4) {
      animation-delay: 0;
    }
    Code:
    #cf6_image {
      margin:0 auto;
      width:450px;
      height:281px;
      transition: background-image 1s ease-in-out;
      background-image:url("/images/Windows%20Logo.jpg");
    }
    
    #cf6_image:hover {
      background-image:url("/images/Turtle.jpg");
    }
    Thank you!

  5. #5
    Join Date
    Oct 2013
    Posts
    20
    Can someone please explain this section of that link that was given?

    Thanks to Pafson's comment, this is finally working as expected! He proposes the following algorithm to determine the percentages and timings:

    For "n" images You must define:
    a=presentation time for one image
    b=duration for cross fading
    Total animation-duration is of course t=(a+b)*n

    animation-delay = t/n or = a+b

    Percentage for keyframes:

    0%
    a/t*100%
    (a+b)/t*100% = 1/n*100%
    100%-(b/t*100%)
    100%
    Just as an example:

    If I want each image to display for 3 seconds, a 1 second transition time, and six total images, what would the calculations be? I will probably end up adding a couple more images, but that will at least give me an understanding of what those calculation mean.

    Thank you!

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,313
    I am no CSS expert on this type of stuff, I thought that CSS would be a better way of doing it having seen css image galleries before.

    I figure the best thing is to have a good play with the CSS code.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Feb 2014
    Posts
    6
    I have created a simple dynamic javascript slideshow script, but no fading or other effects yet. However as far as timig, this is what I use:
    Code:
    //startShow(elem,pause,order)  the element of the show, pause in seconds, order being random or sequential 
    var pauseStr = "startShow('" + elem + "'," + pause + ",'" + order + "')";
    //time out takes milliseconds...
    var pauseMSec = pause * 1000;
    setTimeout(pauseStr, pauseMSec);

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .ss {
      position:relative;left:0px;top:0px;width:200px;height:200px;border-Width:0px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    // Fade Slide Show (30-December-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeSS={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(o.id);
       if (o.ary[n]&&n!=o.n){
        o.ud=n>o.n?1:-1;
        this.rotate(o,n);
       }
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       o.to=setTimeout(function(){ oop.next(o,true); },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     init:function(o){
      var id=o.ID,i=document.getElementById(id),ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,srt=o.AutoStart,z0=0;
      if (i&&ary instanceof Array){
       for (;z0<ary.length;z0++){
        ary[z0][4]=new Image();
        if (ary[z0][0]){
         ary[z0][4].src=ary[z0][0];
        }
       }
       o.id=id;
       o.i=i;
       o.lk=i.parentNode;
       o.ary=ary;
       o.lgth=ary.length-1;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
       o.n=0;
       o.ud=1;
       o.a=[document.createElement('IMG')]
       o.a[0].style.position='absolute';
       o.a[0].style.zIndex='101';
       o.a[0].style.top=o.a[0].style.left='-3000px';
       document.body.appendChild(o.a[0]);
       zxcFadeSS['zxc'+id]=o;
       typeof(srt)=='number'&&srt>0?this.Auto(id,srt):null;
      }
     },
    
     next:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      var n=o.auto?o.n+o.ud:a,p=this.pos(o.i);
      n=n<0?o.lgth:n>o.lgth?0:n;
      if (o.ary[n]&&o.ary[n][4].width>40){
       o.lk.removeAttribute('href');
       o.i.removeAttribute('title');
       o.a[0].src=o.ary[n][0];
       o.a[0].style.left=p[0]+'px';
       o.a[0].style.width=o.i.width+'px';
       o.a[0].style.height=o.i.height+'px';
       this.animate(o,o.a,0,100,new Date(),o.ms);
       o.a[0].style.top=p[1]+'px';
       o.n=n;
      }
      else if (o.lgth>0){
       o.ary.splice(n,1);
       o.lgth--;
       o.auto?oop.Auto(o.id,20):null;
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(o.dly);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style.filter='alpha(opacity='+n+')';
       a[0].style.opacity=a[0].style.MozOpacity=a[0].style.WebkitOpacity=a[0].style.KhtmlOpacity=n/100-.001;
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       o.i.src=a[0].src;
       a[0].style.top='-3000px';
       o.ary[o.n][1]?o.lk.href=o.ary[o.n][1]:null;
       o.ary[o.n][2]?o.i.title=o.ary[o.n][2]:null;
       o.auto?oop.Auto(o.id,o.hold):null;
      }
     },
    
     pos:function(o){
      var rtn=[0,0];
      while(o){
       rtn[0]+=o.offsetLeft;
       rtn[1]+=o.offsetTop;
       o=o.offsetParent;
      }
      return rtn;
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <br />
    <br />
    
      <a><img id="ss" class="ss" src="http://www.vicsjavascripts.org/StdImages/1.gif" onmouseover="zxcFadeSS.Pause('ss');" onmouseout="zxcFadeSS.Auto('ss');" /></a>
      <a><img id="ss1" class="ss" src="http://www.vicsjavascripts.org/StdImages/1.gif" onmouseover="zxcFadeSS.Pause('ss1');" onmouseout="zxcFadeSS.Auto('ss1');" /></a>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    zxcFadeSS.init({
     ID:'ss',           // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs.                (array)
      // field 0 = the image SRC.
      // field 1 = the image link HREF.
      // field 2 = the image link title.
      ['http://www.vicsjavascripts.org/StdImages/1.gif','','Image 1'],
      ['http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/','Image 2'],
      ['http://www.vicsjavascripts.org/StdImages/3.gif','','Image 3'],
      ['http://www.vicsjavascripts.org/StdImages/4.gif','','Image 4']
     ],
     FadeDuration:1000, //(optional) the fade duration in milli seconds.                (number, default = 1000)
     HoldDuration:2000, //(optional) the auto rotation fade duration in milli seconds.  (number, default = FadeDuration*4)
     AutoStart:2000     //(optional) the delay before starting auto rotation.           (number, default = no auto start)
    });
    
    
    zxcFadeSS.init({
     ID:'ss1',          // the unique ID name of the image.                             (string)
     ImageArray:[       // an array defining the slide show images SRCs.                (array)
      // field 0 = the image SRC.
      // field 1 = the image link HREF.
      // field 2 = the image link title.
      ['http://www.vicsjavascripts.org/StdImages/1.gif','','Image 1'],
      ['http://www.vicsjavascripts.org/StdImages/2.gif','http://www.vicsjavascripts.org/','Image 2'],
      ['http://www.vicsjavascripts.org/StdImages/3.gif','','Image 3'],
      ['http://www.vicsjavascripts.org/StdImages/4.gif','','Image 4']
     ],
     FadeDuration:1000, //(optional) the fade duration in milli seconds.                (number, default = 1000)
     HoldDuration:2000, //(optional) the auto rotation fade duration in milli seconds.  (number, default = FadeDuration*4)
     AutoStart:2000     //(optional) the delay before starting auto rotation.           (number, default = no auto start)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    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/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles