Slideshow Demo

This demonstrates a commonly-asked question: how do I use Fillmore to create a slideshow of background images?


<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../jquery.fillmore.js"></script>
<script>
	// Create an array of images that you'd like to use
	var images = [
		"pot-holder.jpg",
		"coffee.jpg"
	];
	// The index variable will keep track of which image is currently showing
	var index = 0;

	// Call fillmore for the first time,
	// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
	$.fillmore( { src: images[index], speed: 500 } );

	// Set an interval that increments the index and sets the new image
	// Note: The fadeIn speed set above will be inherited
	setInterval(function() {
		index = (index >= images.length - 1) ? 0 : index + 1;
		$.fillmore( { src: images[index] } );
	}, 5000);
</script>