Advanced Search

Return to Snippet

Revision: 12217
at March 6, 2009 07:11 by 1man
Updated Code 
/**
 * Image Cycle
 */
//Settings
var faderSettings = {
	timing: 5000,
	fadeSpeed: 400,
	numberOfImages: 4,
	imagePrefix: "car",
	imageSuffix: ".jpg",
	imageDirectory: "../images/"
};
var displayImage = function(displayImage){
	var imageURL = faderSettings.imageDirectory + displayImage;
	$("#imageContainer").fadeOut(faderSettings.fadeSpeed, function(){
		$(this).css({
			'backgroundImage': 'url('+ imageURL + ')'
		}).fadeIn(faderSettings.fadeSpeed);
	});
};
function outer(){
	var a = 1;
	function inner(){
		if(a==faderSettings.numberOfImages){
			a = 1;
		} else {a++;}
		var imageNeeded = faderSettings.imagePrefix + a + faderSettings.imageSuffix;
		displayImage(imageNeeded);
	}
	return inner;
}
var imageFade = outer();
var cycleMe = setInterval(imageFade, faderSettings.timing);

Revision: 12216
at March 6, 2009 07:11 by 1man
Initial Code 
/**
		 * Image Cycle
		 */
		//Settings
		var faderSettings = {
			timing: 5000,
			fadeSpeed: 400,
			numberOfImages: 4,
			imagePrefix: "car",
			imageSuffix: ".jpg",
			imageDirectory: "../images/"
		};
		var displayImage = function(displayImage){
			var imageURL = faderSettings.imageDirectory + displayImage;
			$("#imageContainer").fadeOut(faderSettings.fadeSpeed, function(){
				$(this).css({
					'backgroundImage': 'url('+ imageURL + ')'
				}).fadeIn(faderSettings.fadeSpeed);
			});
		};
		function outer(){
			var a = 1;
			function inner(){
				if(a==faderSettings.numberOfImages){
					a = 1;
				} else {a++;}
				var imageNeeded = faderSettings.imagePrefix + a + faderSettings.imageSuffix;
				displayImage(imageNeeded);
			}
			return inner;
		}
		var imageFade = outer();
		var cycleMe = setInterval(imageFade, faderSettings.timing);
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Simple imagefader to rotate around a few images. Seem to be doing this a lot in various projects so decided to put something a bit more generic together. Uses jQuery. Images named as car1.jpg, car2.jpg, car3..... etc.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Simple jQuery Imagefader

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
image, simple, jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery