Question

I’ve tried to make my first jquery plugin (a lightbox). It works on a single element just the way I want but if I use multiple elements it overwrites my options.

here is my current code. it doesn’t seem to work on jsFiddle because of the layout.

http://jsfiddle.net/BjwCm/

you can download the code with a working (failing) sample here:

http://frumbert.org/files/frumbox.zip

I can see that I’m somehow overwrite the options in the default object when I bind to a second object but don’t know what i’ve done wrong. I’ve tried moving where click is bound but can’t make it work.

Answer 1

$this, declared in the outermost closure and used throughout, represents the last element on which FrumBox is instantiated.

Personally, I wouldn’t try to fix the code as it stands. Instead adopt jQuery’s “Best Practices” pattern. Here’s my template based on the example given:

(function($){
    // **********************************
    // ***** Start: Private Members *****
    var pluginName = 'xxxxx';
    // ***** Fin: Private Members *****
    // ********************************

    // *********************************
    // ***** Start: Public Methods *****
    var methods = {
        init : function(options) {
            //"this" is a jquery object on which this plugin has been invoked.
            return this.each(function(index){
                var $this = $(this);
                var data = $this.data(pluginName);
                // If the plugin hasn't been initialized yet
                if (!data){
                    var settings = {
                    };
                    if(options) { $.extend(true, settings, options); }

                    $this.data(pluginName, {
                        target : $this,
                        settings: settings
                    });
                }
            });
        },
        myMethod_1 : function(){.....},
        myMethod_2 : function(){.....}
    };
    // ***** Fin: Public Methods *****
    // *******************************

    // *****************************
    // ***** Start: Supervisor *****
    $.fn[pluginName] = function( method ) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || !method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' + method + ' does not exist in jQuery.' + pluginName );
        }
    };
    // ***** Fin: Supervisor *****
    // ***************************
})( jQuery );

Notes:

• Add further private members and methods as required.
• Public members (methods) are privileged (they have access to private members).
• To maintain chainability, be sure to adopt the return this.each(function(index){...}) pattern in every method, except any that return a specific value.
• Arguably the hardest aspect of developing with this pattern (and others) is being aware of what this refers to in every context. Keep your wits about you.
• Be prepared to use javascript Function.call() and Function.apply methods. Make sure you understand them.
• The supervisor is difficult to understand at first glance but doesn’t need to be
  modified. It is a cool chunk of code.
• Instantiate the plugin on DOM element(s) with $(selector).pluginNmae() or $(selector).pluginNmae(options), where options is an object literal “map”.
• Invoke methods on initialised DOM element(s) with $(selector).pluginNmae('methodName', ...)
• An example of this pattern can be found in the selected answer here (including a link to a fiddle).