Web Development

Web Development Tips & Tricks, the things that you don’t want to figure out.





«
»

Image Cross-Fader in Javascript

Ok, I know I have a bunch of bugs to report as well but this what I’ve been working on, so I thought I would share it with you.

Many sites use flash tor fading images into each other, or to present a slide show. Sure, you can do this if you have the flash experience, or have one of the many programs that create them for you (most are paid programs, unless you want a watermark.) It’s not a bad solution, but there is another solution, Javascript.

A friend of mine found this cross-fade script, Image Cross Fade Redux. That shows it in action (I suggest taking a look so you can see what the cross fader does), he unfortunately doesn’t offer you the code. It’s not hidden, but he doesn’t display it for you to download or copy and paste. Well, here’s the code:

xfade.js

/*****Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.comPlease leave this notice intact.Rewrite of old code found here: http://slayeroffice.com/code/imageCrossFade/index.html*****/window.addEventListener?window.addEventListener(“load”,so_init,false):window.attachEvent(“onload”,so_init);var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
if(!d.getElementById || !d.createElement)return;

// DON’T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
// http://slayeroffice.com/code/imageCrossFade/xfade2.css
css = d.createElement(“link”);
css.setAttribute(“href”,“/css/xfade.css”);
css.setAttribute(“rel”,”stylesheet”);
css.setAttribute(“type”,”text/css”);
d.getElementsByTagName(“head”)[0].appendChild(css);

imgs = d.getElementById(“imageContainer”).getElementsByTagName(“img”);
for(i=1;i imgs[0].style.display = “block”;
imgs[0].xOpacity = .99;

setTimeout(so_xfade,5000);
}

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,5000);
} else {
setTimeout(so_xfade,50);
}

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = “alpha(opacity=” + (obj.xOpacity*100) + “)”;
}

}

There are two parts that you may have/want to change.The first is the two parts where it says “5000″. That’s how many milliseconds in between each fade, and I wanted 5 seconds.

The second is the line ‘css.setAttribute(“href”,”/css/xfade.css”);’. Simply change the “/css/xfade.css” to the location of the CSS file I’m about to show you:

xfade.css

#imageContainer {
float: left;
width: 210px;
margin:auto;
position:relative;
}#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}

Feel free to change anything in the #imageContainer section of the CSS file. The only parts that need to stay is the “position: relative;” and “margin: auto;”. I suggest setting the width and height to the width of the widest image and the height of tallest image.

Make sure you include the Javascript on the page, a line like:<script type=”text/javascript” language=”javascript” src=”/js/xfade.js”></script>

The last part is the actual pictures you want to cross fade into.

HTML code

<div id=”imageContainer”>
<img src=”/images/sailor.jpg” width=”181″ height=”378″ />
<img src=”/images/footballfullsize.jpg” width=”210″ height=”338″ />
<img src=”/images/cop.jpg” width=”209″ height=”500″ />
<img src=”/images/baseball.jpg” width=”200″ height=”474″ />
</div>

There is one thing you should pay attention to.

The <div id=”imageContainer”> contains all the images you want to fade into each other. This must remain the same.

You can see it in action on Life Size Custom Standups, where I was learning to use it.

-Kerry

Share and Enjoy:
  • email
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Technorati
  • Google Bookmarks
  • Furl
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

This entry was posted on Sunday, September 16th, 2007 at 12:34 pm and is filed under Javascript, Phoenix Development, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a reply