Question

I’m new in jquery plugin. I need to specify totalWidth as an option so that I can change the scrollWidth according to my needs. Could someone help me?

(function( $ ) {
    $.fn.scrollAnimation = function(options) {
            var totalWidth;
            var settings = $.extend( {
                                        'totalWidth'         :'totalWidth'
                                    }, options);

            return this.each(function() {

                    var element = $(this);
                    var offset_1 = $("ul li.list:first-child",element).position().left;
                    var offset_2 = $("ul li.list:nth-child(2)",element).position().left; 
                    var totalWidth =(offset_2-offset_1);





            $(".abc",element).click(function() {
                $(".images",element).not(":animated").animate({"scrollLeft":"-="+totalWidth},300);
                return false;
            });



            $(".def",element).click(function() {
                $(".images",element).not(":animated").animate({"scrollLeft":"+="+totalWidth},300);
                return false;
            });
         });
      };
})( jQuery ); 

Answer 1

Add settings to your plugin like this

$.fn.scrollAnimation.settings={property:'value',totalWidth:'somevalue'};

This will be the default settings for your plugin.

You can use $.extend to merge the properties of user given options and $.fn.scrollAnimation.settings into a single object giving precedence to user given options

$.extend({},$.fn.scrollAnimation.settings,options);

So your updated code will be like

(function( $ ,win, doc) {
    $.fn.scrollAnimation = function(options) {
            var totalWidth;
            var localsettings = $.extend( {},$.fn.scrollAnimation.settings,options);
                    ...
                    ...
                    ...
                 };

      $.fn.scrollAnimation.settings={property:'value',totalWidth:'somevalue'};
})( jQuery ,window,document,undefined);