JavaScript Tutorials Advanced

Image Cross Fade Redux

This is a captivating way to present photos on a webpage. A working demonstration can be found here: http://slayeroffice.com/code/imageCrossFade/xfade2.html

This technique uses unobtrusive DOM scripting and semantic markup to achieve its goals, and is somewhat less abusive of the CPU in Firefox. It also works in Safari - the original version was written prior to Safari supporting the CSS3 "opacity" property. Opera doesn't support opacity, so the images will just flip in that browser.

Following the unobtrusive philosophy, the document is completely usable when javascript isn't available. This is accomplished by overwriting the style sheet with one designed for the application in the so_init() method. If javascript isn't available, the user gets an arms length list of photos.

The source of the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>image cross fade redux</title> <link rel="stylesheet" type="text/css" href="/xfade2_o.css" /> <script type="text/javascript" src="/xfade2.js"></script> </head> <body> <div id="imageContainer"> <img src="/img1.jpg" width="500" height="309" /> <img src="/img2.jpg" width="500" height="309" /> <img src="/img3.jpg" width="500" height="309" /> <img src="/img4.jpg" width="500" height="309" /> <img src="/img5.jpg" width="500" height="309" /> <img src="/img6.jpg" width="500" height="309" /> </div> </body> </html>

Copy the following JavaScript source into your favourite editor and save as "/xfade.js":

/***** Image Cross Fade Redux Version 1.0 Last revision: 02.15.2006 steve@slayeroffice.com Please 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; css = d.createElement("link"); css.setAttribute("href","/xfade2.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.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,1000); } 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,1000); } 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) + ")"; } }

The following two pieces of code are the CSS files, which the page needs.

Initial CSS (/xfade2.css):

#imageContainer { position:relative; margin:auto; width:500px; border:1px solid #000; }

CSS imported with JavaScript (xfade2_0.css):

#imageContainer { height:309px; } #imageContainer img { display:none; position:absolute; top:0; left:0; }

â€”
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced

[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Tutorials Advanced -
Image Cross Fade Redux