Question

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/

Was it helpful?

Solution

setTimeout(function(){
    InfiniteRotator.init();
},2000);

OTHER TIPS

Rewrite the last closing bracket:

});

Looks like there is hidden characters.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top