
// Create an array of images that you'd like to use
var images = [
	"/gallery/photography/projects/project-366-2012/20120101134307.jpg",
	"/gallery/photography/projects/project-366-2012/20120110173701.jpg",
	"/gallery/photography/projects/project-366-2012/20120118174159.jpg",
	"/gallery/photography/projects/project-366-2012/20120105163458.jpg",
	"/gallery/photography/projects/project-366-2012/20120120182436.jpg",
	"/gallery/photography/projects/project-366-2012/20120123121510.jpg",
	"/gallery/photography/projects/project-366-2012/20120119182456.jpg"
];

// A little script for preloading all of the images
// It's not necessary, but generally a good idea
$(images).each(function(){
   $('<img/>')[0].src = this; 
});

// The index variable will keep track of which image is currently showing
var index = Math.floor(Math.random()*(images.length-1));

// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(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;
	$.backstretch(images[index]);
}, 5000);
