SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast tide's Avatar
    Join Date
    Mar 2005
    Location
    Hawaii
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javasript photo rotation fade-out

    First, I should say that I don't know Javascript. Someone has asked me to fix this rotating image feature.

    The fade in works fine but there is no fade out—or at least it's very abrupt. I would like the fade-out to be the same as the fade-in.

    Does anyone know how I can adjust this Javascript file to fix that?

    Any help would be much, much appreciated!

    Thank you.


    Here's the link.

    http://www.dayaceglia.com/clients/rotator/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Like you, I don't know JS well enough to fix this, but if all else fails, you could try out jQuery Cycle, which is a very reliable alternative to this. It is a bit heavier on code (as you have to link to the jQuery library—preferably on Google) but it works nicely.

    Here is the Cycle home page.

  3. #3
    SitePoint Enthusiast tide's Avatar
    Join Date
    Mar 2005
    Location
    Hawaii
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was trying to avoid redoing it but I might have to go that route if I don't find a fix for it.

    Thanks!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem is in the example script, which you have used. When you visit that example page (the 'updated' one), the first sequence of images are uncontrolled, after which they seem to come together and cross-fade OK. Anyway, I think I found the problems in the init function, and your adjusted page is below. If you are interested, significant changes are marked with double asterisks. A few minor/cosmetic changes were also made. I haven't checked your CSS, but make sure all your slideshow images have position: absolute.

    Those lines which toggle the display property between 'block' (for the active image pair) and 'none' (for any passive images) are not really required, so they are commented out. The script is using opacity to control what the viewer sees, so there seemed little point in also setting the images to display:none while they are passive, when the viewer can't see them anyway as their opacities are zero.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="_css/reuscher.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #rotator {
      width: 1000px;
      margin: 0 auto;
      height: 332px;
    }
    </style>
    </head>
    <body>
    
    <div id="rotator">
      <img src="_images/home/home-photo1.jpg" alt="" />
      <img src="_images/home/home-photo2.jpg" alt="" />
      <img src="_images/home/home-photo3.jpg" alt="" />
    </div>
    
    <script type="text/javascript">
    /*
    Image Cross Fade Redux
    Version 1.0
    Last revision: 02.15.2006
    Rewrite of old code found here:
    http://slayeroffice.com/code/imageCrossFade/index.html
    Updated here:
    http://slayeroffice.com/code/imageCrossFade/xfade2.html
    */
    
    window.addEventListener?
      window.addEventListener('load',so_init,false):
      window.attachEvent('onload',so_init);
    
    var d=document,
        imgs = new Array(),
        current=0;
    
    // **This function needs to be global - called by both functions below
    function setOpacity(obj) {
      if(obj.xOpacity>1.0) {
        obj.xOpacity = 1.0;
        return;
      }
      obj.style.MozOpacity = obj.xOpacity/1.01;
      obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
      obj.style.opacity = obj.xOpacity;
    }
    
    function so_init(){
      if(!d.getElementById || !d.createElement) return;
      css = d.createElement('link');
      css.setAttribute('href','slideshow2.css');
      css.setAttribute('rel','stylesheet');
      css.setAttribute('type','text/css');
      d.getElementsByTagName('head')[0].appendChild(css);
    
      imgs = d.getElementById('rotator').getElementsByTagName('img');
      for(var i=1;i<imgs.length;i++) {
        imgs[i].xOpacity = 0;
        setOpacity(imgs[i]); 	// ** required addition
      }
      // imgs[0].style.display = 'block';
      imgs[0].xOpacity = 1.0;
      setOpacity(imgs[0]);  	// ** required addition
      setTimeout(so_xfade,3000);
    }
    
    function so_xfade() {
      cOpacity = imgs[current].xOpacity;
      nIndex = imgs[current+1]?current+1:0;
      nOpacity = imgs[nIndex].xOpacity;
    
      cOpacity-=.05;
      nOpacity+=.05;
    
      // imgs[nIndex].style.display = 'block';
      imgs[current].xOpacity = cOpacity;
      imgs[nIndex].xOpacity = nOpacity;
    
      setOpacity(imgs[current]);
      setOpacity(imgs[nIndex]);
    
      if(cOpacity<=0){
        // imgs[current].style.display = 'none';
        current = nIndex;
        setTimeout(so_xfade,2000);
      }
      else {
        setTimeout(so_xfade,50);
      }
    }
    </script>
    </body>
    </html>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lnhicks View Post
    Those lines which toggle the display property between 'block' (for the active image pair) and 'none' (for any passive images) are not really required
    Without them, though, the images appear one atop another, so with overflow hidden on the container images 2 and 3 don't show.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm ... thanks for mentioning that ... I didn't look through the CSS file, but just mentioned (at end of my first paragraph) the need to absolutely position the images. But having just checked, the existing CSS does not have that, so it will need the following addition:

    Code:
    #rotator img { position: absolute; }
    ... so as to ensure all the images do sit atop one-another and can cross-fade. I did simplify the div styling for this example, but the cross-fading works perfectly.

    This script does actually work by having all the images stacked one-atop-the-other. All but 2 of the images, at any one time, have opacities of zero, hence are invisible. The other 2 are the currently cross-fading images. That's why I couldn't see an additional need for the display toggling - the opacity is doing all the work. Anyway, I did check it in several browsers, and those 3 commented display-setting lines make no visible difference to the cross-fading, whether they are in or out.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Nice work, lnhicks. Very impressive.

  8. #8
    SitePoint Enthusiast tide's Avatar
    Join Date
    Mar 2005
    Location
    Hawaii
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love it. While I slumber you've solved all my problems.

    It works!

    Thank you both.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you are after a really small script for doing all sorts of fancy image transitions with javaScript then take a look at the one written by Brothercake at http://www.brothercake.com/site/reso...s/transitions/
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

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
  •