jQuery.extend({ BgImageTransitions: [] }); jQuery.fn.extend({ BgImageTransition: function(src, options) { if( !src ){ return jQuery; } function copyCSS( from, to ){ jQuery(['border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-left-lolor', 'border-left-style', 'border-left-width', 'border-right-color', 'border-right-style', 'border-right-width', 'border-spacing', 'border-top-color', 'border-top-style', 'border-top-width', 'bottom', 'height', 'left', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'marker-offset', 'max-height', 'max-width', 'min-height', 'min-width', 'opacity', 'outline-color', 'outline-offset', 'outline-width', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'top', 'width', 'z-index']).each( function(i,v){ jQuery(to).css( v, jQuery(from).css( v ) ); }); } if( !this.css('zIndex') ){ this.css('zIndex',1); } var settings = jQuery.extend({ effect: {opacity: 'toggle'}, duration: 'slow', easing: 'linear', callback: function(){}, helperElementId: this.attr('id')+'2', zindex: parseInt(this.css('zIndex'),10)+1 }, options); var helperElement = null; if( !jQuery.BgImageTransitions[this.attr('id')] ){ helperElement = this.clone(); copyCSS( this, helperElement ); helperElement.css('zIndex', settings.zindex); helperElement.css('display', 'none'); helperElement.attr('id', settings.helperElementId ); helperElement.insertAfter(this); jQuery.BgImageTransitions[this.attr('id')] = helperElement; } else{ helperElement = jQuery.BgImageTransitions[this.attr('id')]; } var tempImage = new Image(); jQuery(tempImage).load( function(){ var newImage = ( helperElement.css('display') == 'block' ) ? jQuery(this) : jQuery(helperElement); newImage.css('backgroundImage', 'url('+tempImage.src+')'); helperElement.animate( settings.effect, settings.duration, settings.easing, settings.callback ); }); tempImage.src = src; return jQuery; } }); $( function(){ var bgImages = [ 'blank.jpg', '85mqkhc2zr.jpg', 'rixar8k9tl.jpg', 'fcuftukwtp.jpg', 'dx6pdj4pxy.jpg', 'y482tvzhh9.jpg', 'oct68qp5i4.jpg', 's4lej82aco.jpg', 'c4ozw3w76x.jpg', '9yfcntl4gz.jpg', '75qjzsds0k.jpg', '27q1yzxrdx.jpg', '90x0aekms7.jpg', '13aelfbi1q.jpg', 'vxa0hogpqg.jpg' ]; var currImage = 'quddthaqtn.jpg'; // -- set the first image as the defautl background $('#header').css("backgroundImage",'url(/header/images/'+currImage+')'); setInterval( function(){ do{ var randImage = bgImages[Math.ceil(Math.random()*(bgImages.length-1))]; }while( randImage == currImage ) currImage = randImage; $('#header').BgImageTransition( '/header/images/'+currImage ); }, 5000) })