// IXF1.11 :: Image cross-fade // ***************************************************** // DOM scripting by brothercake -- http://www.brothercake.com/ //****************************************************** //global object var ixf = { 'clock' : null, 'count' : 1 } /******************************************************* /***************************************************************************** List the images that need to be cached *****************************************************************************/ ixf.imgs = [ 'images/coverImages/Newcover1.jpg', 'images/coverImages/Newcover4.jpg', 'images/coverImages/Newcover7.jpg', 'images/coverImages/Newcover8.jpg', 'images/coverImages/Newcover5.jpg', 'images/coverImages/Newcover7.jpg', 'images/coverImages/Newcover10.jpg' /*"images/coverImages/cover_image1.jpg", "images/coverImages/cover_image2.jpg", "images/coverImages/cover_image3.jpg", "images/coverImages/cover_image4.jpg", "images/coverImages/cover_image5.jpg", "images/coverImages/cover_image6.jpg", "images/coverImages/cover_image7.jpg", "images/coverImages/cover_image8.jpg", "images/coverImages/cover_image9.jpg", "images/coverImages/cover_image10.jpg", "images/coverImages/cover_image11.jpg", "images/coverImages/cover_image12.jpg", "images/coverImages/cover_image13.jpg", "images/coverImages/cover_image14.jpg", "images/coverImages/cover_image15.jpg", "images/coverImages/cover_image16.jpg", "images/coverImages/cover_image17.jpg", "images/coverImages/cover_image18.jpg", "images/coverImages/cover_image19.jpg", "images/coverImages/cover_image20.jpg", "images/coverImages/cover_image21.jpg", "images/coverImages/cover_image22.jpg", "images/coverImages/cover_image23.jpg", "images/coverImages/cover_image24.jpg" */ /*"images/cover_image1.jpg", "images/cover_image2.jpg", "images/cover_image3.jpg", "images/cover_image4.jpg", "images/cover_image5.jpg", "images/cover_image6.jpg", "images/cover_image7.jpg", "images/cover_image8.jpg", "images/cover_image9.jpg", "images/cover_image10.jpg", "images/cover_image11.jpg", "images/cover_image12.jpg", "images/cover_image13.jpg"*/ ]; /***************************************************************************** *****************************************************************************/ //cache the images ixf.imgsLen = ixf.imgs.length; ixf.cache = []; for(var i=0; i 0 && typeof ixf.obj.filters.alpha == 'object' && typeof ixf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none'; ixf.type = 'ie'; ixf.obj.style.filter = "alpha(opacity=100)"; } else { ixf.type = 'none'; } //change the image alt text if defined if(typeof arguments[3] != 'undefined' && arguments[3] != '') { ixf.obj.alt = arguments[3]; } //if any kind of opacity is supported if(ixf.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 ixf.newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img')); //set positioning classname ixf.newimg.className = 'idupe'; if(ixf.type == 'ie') { ixf.newimg.style.filter = "alpha(opacity=100)"; } //set src to new image src ixf.newimg.src = ixf.src //move it to superimpose original image if (ixf.type == "ie") { ixf.newimg.style.left = parseInt(ixf.getRealPosition(ixf.obj, 'x')) + 1 + 'px'; ixf.newimg.style.top = parseInt(ixf.getRealPosition(ixf.obj, 'y')) + 1 + 'px'; } else { ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px'; ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px'; } //copy and convert fade duration argument ixf.length = parseInt(arguments[2], 10) * 1000; //create fade resolution argument as 20 steps per transition ixf.resolution = parseInt(arguments[2], 10) * 20; //start the timer ixf.clock = setInterval('ixf.crossfade()', ixf.length/ixf.resolution); } //otherwise if opacity is not supported else { //just do the image swap ixf.obj.src = ixf.src; } } }; //crossfade timer function ixf.crossfade = function() { //decrease the counter on a linear scale ixf.count -= (1 / ixf.resolution); //if the counter has reached the bottom if(ixf.count < (1 / ixf.resolution)) { //clear the timer clearInterval(ixf.clock); ixf.clock = null; //reset the counter ixf.count = 1; //set the original image to the src of the new image ixf.obj.src = ixf.src; } //set new opacity value on both elements //using whatever method is supported switch(ixf.type) { case 'ie' : ixf.obj.filters.alpha.opacity = ixf.count * 100; ixf.newimg.filters.alpha.opacity = (1 - ixf.count) * 100; break; case 'khtml' : ixf.obj.style.KhtmlOpacity = ixf.count; ixf.newimg.style.KhtmlOpacity = (1 - ixf.count); break; case 'moz' : //restrict max opacity to prevent a visual popping effect in firefox ixf.obj.style.MozOpacity = (ixf.count == 1 ? 0.9999999 : ixf.count); ixf.newimg.style.MozOpacity = (1 - ixf.count); break; default : //restrict max opacity to prevent a visual popping effect in firefox ixf.obj.style.opacity = (ixf.count == 1 ? 0.9999999 : ixf.count); ixf.newimg.style.opacity = (1 - ixf.count); } //now that we've gone through one fade iteration //we can show the image that's fading in ixf.newimg.style.visibility = 'visible'; //keep new image in position with original image //in case text size changes mid transition or something if (ixf.type == "ie") { ixf.newimg.style.left = parseInt(ixf.getRealPosition(ixf.obj, 'x')) - 1 + 'px'; ixf.newimg.style.top = parseInt(ixf.getRealPosition(ixf.obj, 'y')) - 1 + 'px'; } else { ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px'; ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px'; } //if the counter is at the top, which is just after the timer has finished if(ixf.count == 1) { //remove the duplicate image ixf.newimg.parentNode.removeChild(ixf.newimg); } }; //get real position method ixf.getRealPosition = function() { if(ixf.type == 'ie') { this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft+1 : arguments[0].offsetTop+1; } else { this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft : arguments[0].offsetTop; } //alert(arguments[0].offsetLeft); //alert(arguments[0].offsetTop); this.tmp = arguments[0].offsetParent; while(this.tmp != null) { this.pos += (arguments[1] == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop; this.tmp = this.tmp.offsetParent; } return this.pos; };