Question

I have the following code

(function($) {
    // carousel
    var Carousel = {
        settings: {
            itemsPerPage: 1,
            itemsPerTransition: 1,
            noOfRows: 1,
            pagination: true,
            nextPrevLinks: true,
            speed: 'normal',
            easing: 'swing',
            loop: false,
            auto: true,
            autoTime: 4000,

            maxHeight: 300,
            maxWidth: 500
        },
        init: function(el, options) 
        {
            if (!el.length) 
            { 
                return false; 
            }

            this.options = $.extend({}, this.settings, options);

            this.container = el;

            this.panelHeight = 0;
            this.panelWidth = 0;
            this.numPanels = 0;

            // Find biggest panel in set
            this.container.find(".tinycarousel > li > div").each(function() 
            {
                if($(this).outerHeight() > this.panelHeight)
                {
                    this.panelHeight = $(this).outerHeight();
                }

                if($(this).outerWidth() > this.panelWidth)
                {
                    this.panelWidth = $(this).outerWidth();
                }

                this.numPanels++;
            });

            alert(this.numPanels);
        },
        autoSwitch: function()
        {
            this.container.find(".tinycarousel").animate({marginLeft: -panelWidth});
        }
    };

    // bridge
    $.fn.tinycarousel = function(options) {
        return this.each(function() {
            var obj = Object.create(Carousel);
            obj.init($(this), options);
            $.data(this, 'carousel', obj);
        });
    };
})(jQuery);

The problem I’m having here is that this.numPanels gives a result of 0 (and I know it should be 3). It worked before I used this. and just had numPanels as an ordinary variable, but now it doesn’t. I’m sorry I can’t offer any more information, but my question is this: how can I make variables inside a jQuery plugin ‘editable’.

EDIT
My apologies for any confusion – I just didn’t want to post a silly amount of code and make it unreadable. Please see my full code above.

EDIT 2 I feel like suck a pillock… Take a look at the autoSwitch function – this is where I get an error: panelWidth is not defined which is why I tried using this.

Answer 1

this.numPanels++ is local in scope to the anonymous function called in your each(). If you replaced your initial declaration to var numPanels = 0; and accessed it within your function (or passed in numPanels by reference) you’ll get the expected result.

Do it like this:

this.panelHeight = 0;
this.panelWidth = 0;
this.numPanels = 0;
var self = this; // reference to this
// Find biggest panel in set
this.container.find(".tinycarousel > li > div").each(function() {
    if($(this).outerHeight() > self.panelHeight) { // use self
        self.panelHeight = $(this).outerHeight();  // use self
    }

    if($(this).outerWidth() > self.panelWidth){    // use self
        self.panelWidth = $(this).outerWidth();    // use self
    }
    self.numPanels++; // use self
});