I've just setup a Jquery image rotator on my website and want to customize it so that the images dont rotate until 2 seconds has passed.
I've been trying to do this by implementing the setTimeout function (right where the //loop through items comment is) but it keeps saying my function is not declared, so im presuming that tt wont work in that spot.
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator = {
init: function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 0;
//interval between items (in milliseconds)
var itemInterval = 2000;
//cross-fade time (in milliseconds)
var fadeTime = 1000;
//count number of items
var numberOfItems = $('.rotating-left').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-left').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function() {
$('.rotating-left').eq(currentItem).fadeOut(fadeTime);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-left').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
Im using the code from this site http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/
setTimeout(function(){
InfiniteRotator.init();
},2000);