jQuery image rotator: function not defined

Question

I have transformed a custom image header into an image rotator by using this tutorial to build the rotator script from scratch: http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator. I went step by step through the tutorial to type the code, but when I try to run, the Firebug console gives this error:

ReferenceError: rotateImages is not defined

xx = setInterval('rotateImages()', 4000);

Thinking that I might have mistyped a line of code, I copied the script from the working demo, and I received the same error.

I am running this script in a .js file:

(function($) {
$(document).ready(function() {

    //loop through pictures
    $('.headerpic_inner').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).attr('id', 'handle' + e);

    });


    //loop through tags
    $('.tabs li').each(function(e) {
        if(e == 0) {
            $(this).addClass('current');
        }

        $(this).wrapInner('<a class="title"></a>');
        $(this).append('<a><img /></a>');
        $(this).children('a').attr('href', '#handle' + e);
        y = $('#handle' + e + ' img').attr('src');
        $(this).find('img').attr('src', y);
        t = $(this).children('a').text();
        $('#handle' + e).append('<h2>' + t + '</h2>');

    });


    //change image on click
    $('.tabs li a').click(function() {

        c = $(this).attr('href');
        if($(c).hasClass('current')) {
            return false;
        } else {
            showImage($(c), 20);
            $('.tabs li').removeClass('current');
            $(this).parent().addClass('current');
            return false;
        }

    });




    //call to rotate images
    runRotateImages();
    $('#headerpic').hover(function() {
        clearTimeout(xx);
    },
    function() {
        runRotateImages();
    });





}); //end of $(document).ready function



//showImage function
function showImage(img, duration) {
    $('.headerpic_inner').removeClass('current').css({
        'opacity' : 0.0,
        'zIndex' : 2,
    });

    img.animate({opacity:1.0}, duration, function() {
        $(this).addClass('current').css({zIndex:1});

    });

}


//rotateImages function
function rotateImages() {
    var curPhoto = $('div.current');
    var nxtPhoto = curPhoto.next();
    var curTab = $('.tabs li.current');
    var nxtTab = curTab.next();

    if(nxtPhoto.length == 0) {
        nxtPhoto = $('#headerpic div:first');
        nxtTab = $('.tabs li:first-child');
    }

    curTab.removeClass('current');
    nxtTab.addClass('current');
    showImage(nxtPhoto, 300);

}

//runRotateImages function
function runRotateImages() {
    xx = setInterval('rotateImages()', 4000);
}




})(jQuery);

Can anyone tell me why it would say that rotateImages() is not defined?

MrCode · Accepted Answer · 2013-01-09 12:56:49Z

1

The other answers provided a fix but they didn't explain why your code doesn't work. I'll have a stab:

setInterval() can actually take a quoted argument as a string, your original code is actually syntactically correct:

xx = setInterval('rotateImages()', 4000);

So why doesn't it work? When you pass the argument with quotes, the setInterval() call will look in the global scope for the function rotateImages(). The problem is, your function rotateImages() is defined within a closure. Your entire code is wrapped using:

(function($) {
    $(document).ready(function() {


    });
})(jQuery);

The suggested fix setInterval(rotateImages, 4000) works because when you pass the function name without quotes and without parenthesis, setInterval() will first look in the local scope for the function, where it finds the function and can call it.

answered Jan 9, 2013 at 12:56

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nitsuj Over a year ago

The other answers fixed it, but left me wondering why the same exact code worked on the tutorial demo, but not on my site where I have to wrap my code in the the $jquery function because I'm using Drupal 7. This explains it! :)

Talha Akbar · Accepted Answer · 2013-01-09 12:44:25Z

1

var xx = setInterval(rotateImages, 4000);

You have to setInterval like the above one.

answered Jan 9, 2013 at 12:44

Talha Akbar

10.1k7 gold badges42 silver badges62 bronze badges

4 Comments

nitsuj Over a year ago

When I tried this before, I got this error: Error: useless setInterval call (missing quotes around argument?) I realize that it was because I used the rotateImages() instead of rotateImages. Works now! Thanks!

nitsuj Over a year ago

Any idea why it would show the two test pictures that I have provided and show a blank slide after?

Talha Akbar Over a year ago

That is a plugin fault that it does not checks whether the slider contains next image or not!

nitsuj Over a year ago

The fix was to move my tabs out of the #headerpic div. Of course, I didn't provide my HTML for you to see that.

Ravinder Singh · Accepted Answer · 2013-01-09 12:46:11Z

0

Just remove the single quotes from around it and it should work.

Try like this :

xx = setInterval(rotateImages, 4000);

answered Jan 9, 2013 at 12:46

Ravinder Singh

3,1336 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

jQuery image rotator: function not defined

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related