// IXF1.11 :: Image cross-fade //****************************************************** // DOM scripting by brothercake -- http://www.brothercake.com/ //****************************************************** /*** Hacked by Ben Farhner ***/ // core functionality same, but redesigned as a class and added features //global object var banner = { imgPrefix: 'images/banner', // image URI prefix imgSuffix: '.png', // image URI suffix curIndex: 0, // current image index maxIndex: 3, // maximum image index period: 1, // transition period in seconds autoPeriod: 10, // period between transitions /* Do not modify below unless you know what you're doing! */ clock: null, autoClock: null, count: 1, obj: null, imgs: [], cache: [], // init() // Sets up banner and starts timer // pre: // - image array needs to be initialized before this with list of image // filenames to use. init: function (rootPath, id) { // get the banner image element this.obj = document.getElementById(id); // start automatically crossfading this.autoCrossfade(); }, //crossfade setup function crossfade: function (alt) { //if the timer is not already going if (this.clock == null) { //copy the image src argument this.src = this.imgs[this.curIndex]; //store the supported form of opacity if (typeof this.obj.style.opacity != 'undefined') { this.type = 'w3c'; } else if (typeof this.obj.style.MozOpacity != 'undefined') { this.type = 'moz'; } else if (typeof this.obj.style.KhtmlOpacity != 'undefined') { this.type = 'khtml'; } else if (typeof this.obj.filters == 'object') { //weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data) //then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0) //then the returned value type, which should be a number, but in mac/ie5 is an empty string this.type = (this.obj.filters.length > 0 && typeof this.obj.filters.alpha == 'object' && typeof this.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none'; } else { this.type = 'none'; } //change the image alt text if defined if (typeof alt != 'undefined' && alt != '') { this.obj.alt = alt; } //if any kind of opacity is supported if (this.type != 'none') { //create a new image object and append it to body //detecting support for namespaced element creation, in case we're in the XML DOM //this.newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img')); // create div for transition image var dupediv = (typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'div') : document.createElement('div'); dupediv.className = 'bannerdupe'; // create image within div this.newimg = (typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'); //set positioning classname this.newimg.className = 'bannerdupe'; //set src to new image src this.newimg.src = this.src //move it to superimpose original image //this.newimg.style.left = this.getRealPosition(this.obj, 'x') + 'px'; //this.newimg.style.top = this.getRealPosition(this.obj, 'y') + 'px'; // place div with image in the document dupediv.appendChild(this.newimg); this.obj.parentNode.appendChild(dupediv); //copy and convert fade duration argument this.length = this.period * 1000; //create fade resolution argument as 20 steps per transition this.resolution = this.period * 20; //start the timer this.clock = setInterval('banner.crossfadeHelper()', this.length / this.resolution); } else { //otherwise if opacity is not supported //just do the image swap this.obj.src = this.src; } } }, //crossfade timer function crossfadeHelper: function () { //decrease the counter on a linear scale this.count -= (1 / this.resolution); //if the counter has reached the bottom if (this.count < (1 / this.resolution)) { //clear the timer clearInterval(this.clock); this.clock = null; //reset the counter this.count = 1; //set the original image to the src of the new image this.obj.src = this.src; } //set new opacity value on both elements //using whatever method is supported switch (this.type) { case 'ie': this.obj.filters.alpha.opacity = this.count * 100; var hasAlpha = (this.newimg.filters.alpha != null && typeof this.newimg.filters.alpha == 'object'); var hasOpacity = (this.newimg.filters.alpha.opacity != null && typeof this.newimg.filters.alpha.opacity == 'number'); this.newimg.filters.alpha.opacity = (1 - this.count) * 100; break; case 'khtml': this.obj.style.KhtmlOpacity = this.count; this.newimg.style.KhtmlOpacity = (1 - this.count); break; case 'moz': //restrict max opacity to prevent a visual popping effect in firefox this.obj.style.MozOpacity = (this.count == 1 ? 0.9999999 : this.count); this.newimg.style.MozOpacity = (1 - this.count); break; default: //restrict max opacity to prevent a visual popping effect in firefox this.obj.style.opacity = (this.count == 1 ? 0.9999999 : this.count); this.newimg.style.opacity = (1 - this.count); } //now that we've gone through one fade iteration //we can show the image that's fading in this.newimg.style.visibility = 'visible'; //keep new image in position with original image //in case text size changes mid transition or something //this.newimg.style.left = this.getRealPosition(this.obj, 'x') + 'px'; //this.newimg.style.top = this.getRealPosition(this.obj, 'y') + 'px'; //if the counter is at the top, which is just after the timer has finished if (this.count == 1) { //remove the duplicate image this.newimg.parentNode.parentNode.removeChild(this.newimg.parentNode); } }, //get real position method getRealPosition: function (obj, dir) { this.pos = (dir == 'x') ? obj.offsetLeft : obj.offsetTop; this.tmp = obj.offsetParent; while (this.tmp != null) { this.pos += (dir == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop; this.tmp = this.tmp.offsetParent; } return this.pos; }, // autoCrossfade() // Sets up automatic crossfading autoCrossfade: function () { // initialize auto crossfade timer this.autoClock = setInterval('banner.nextIndex();banner.crossfade("");', this.autoPeriod * 1000); }, // click() // Manually crossfades and resets automatic timer click: function (back) { // stop auto crossfading clearInterval(this.autoClock); // go to next or previous image index if (typeof(back) != 'undefined' && back == true) { this.prevIndex(); } else { this.nextIndex(); } // make next transition this.crossfade(""); // reset auto crossfading this.autoCrossfade(); }, // nextIndex() // Increments image index nextIndex: function () { this.curIndex = (this.curIndex == this.imgs.length - 1) ? 0 : this.curIndex + 1; }, // prevIndex() // Decrements image index prevIndex: function () { this.curIndex = (this.curIndex == 0) ? this.imgs.length - 1 : this.curIndex - 1; }, };