Advanced Search

Simple jQuery Imagefader

/ Published in: jQuery
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * Image Cycle
  3.  */
  4. //Settings
  5. var faderSettings = {
  6. 	timing: 5000,
  7. 	fadeSpeed: 400,
  8. 	numberOfImages: 4,
  9. 	imagePrefix: "car",
  10. 	imageSuffix: ".jpg",
  11. 	imageDirectory: "../images/"
  12. };
  13. var displayImage = function(displayImage){
  14. 	var imageURL = faderSettings.imageDirectory + displayImage;
  15. 	$("#imageContainer").fadeOut(faderSettings.fadeSpeed, function(){
  16. 		$(this).css({
  17. 			'backgroundImage': 'url('+ imageURL + ')'
  18. 		}).fadeIn(faderSettings.fadeSpeed);
  19. 	});
  20. };
  21. function outer(){
  22. 	var a = 1;
  23. 	function inner(){
  24. 		if(a==faderSettings.numberOfImages){
  25. 			a = 1;
  26. 		} else {a++;}
  27. 		var imageNeeded = faderSettings.imagePrefix + a + faderSettings.imageSuffix;
  28. 		displayImage(imageNeeded);
  29. 	}
  30. 	return inner;
  31. }
  32. var imageFade = outer();
  33. var cycleMe = setInterval(imageFade, faderSettings.timing);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.