Question

I’m trying to make my own image rotator that will work if there is multiple image rotators on the screen. Here is what I have got so far:

// jQuery plugin to make image containers rotate.
(function($){

    // Swap text with title attribute
    $.fn.scWFWImageRotator = function() {

        var rotatorTimeSwap = 6000;

        $(this).find("img").removeClass("selected");
        $(this).find("img:first-child").addClass("selected");

        var rotatorImageChangeFunc = function(item) {
            var rotatorImages = $(item).children("img");
            var imgSelected = $(item).children("img.selected");
            var rotatorImgCount = rotatorImages.length;
            var rotatorCurImage = $(imgSelected).index(rotatorImages);
            alert(item);
        }

        return this.each(function() {

            var rotatorTimer;
            var $this  = $(this);
            var func = $.proxy( rotatorImageChangeFunc, $this );

            rotatorTimer = setInterval(func, rotatorTimeSwap);

            $this.hover(
                function() { rotatorTimer = clearInterval(rotatorTimer); },
                function() { rotatorTimer = setInterval(func, rotatorTimeSwap); }
            );

        });

    };

})(jQuery);

Problem is: rotatorImageChangeFunc = function(item) { item is not getting passed to the function. So inside that function I’m getting undefined for item. Why is this the case and how do I put it right?

Answer 1

The context parameter you pass to proxy is passed to the function as this, not as an argument. Just change item to this.

---

Side note: In your main function, you have a couple of $(this).find(...)s. The this that plug-in functions sees is already a jQuert object (which is why your this.each(...) below works), no need to call $() on it again. Just this.find(...).