src/jquery.timelineMe.js
function() {
            this.$el.addClass('timeline-me-container');

            if(this.settings.orientation == 'horizontal') {
                this.$el.addClass('timeline-me-horizontal');
                if(this.settings.scrollBar == false)
                    this.$el.addClass('no-x-scroll');
            } else {
                this.$el.addClass('timeline-me-vertical');
                if(this.settings.scrollBar == false)
                    this.$el.addClass('no-y-scroll');
            }

            var timelineWrapper = $('<div class="timeline-me-wrapper">');
            this.$el.append(timelineWrapper);

            var track = $('<div class="timeline-me-track">');
            timelineWrapper.append(track);

            if(this.settings.scrollZones == true) {
                var leftScroll = $('<div class="timeline-me-leftscroll">');
                var rightScroll = $('<div class="timeline-me-rightscroll">');
                timelineWrapper.before(leftScroll);
                timelineWrapper.after(rightScroll);

                bindScrollTo(leftScroll, rightScroll, timelineWrapper);
            }

            if(this.settings.scrollArrows == true) {
                var leftScroll;
                var rightScroll;
                if(this.settings.leftArrowElm == undefined) {
                    leftScroll = $('<span class="timeline-me-leftarrow">');
                } else {
                    leftScroll = $('<span class="timeline-me-leftarrow-c">');
                    leftScroll.html(this.settings.leftArrowElm);
                }
                if(this.settings.rightArrowElm == undefined) {
                    rightScroll = $('<span class="timeline-me-rightarrow">');
                } else {
                    rightScroll = $('<span class="timeline-me-rightarrow-c">');
                    rightScroll.html(this.settings.rightArrowElm);
                }
                timelineWrapper.before(leftScroll);
                timelineWrapper.after(rightScroll);

                bindScrollTo(leftScroll, rightScroll, timelineWrapper);
            }

            if(this.settings.items && this.settings.items.length > 0) {
                this.content = this.settings.items;

                if(hasNumberProperty(this.content, 'relativePosition')) {
                    this._sortItemsPosition(this.content);
                    this._mergeSamePositionItems(this.content);
                    this._calcDiffWithNextItem(this.content);
                }
                this._sortItemsPosition(this.content);
                this._fillItemsPosition(this.content);

                for(var i = 0; i < this.content.length; i++) {
                    track.append(this._createItemElement(this.content[i]));
                    if(this.settings.orientation == 'horizontal') {
                        resolveContainerWidth(track);
                    }
                }

                // once items' DOM elements have been built, we can reposition them
                if(hasNumberProperty(this.content, 'relativePosition')) {
                    this._calcRelativePosRatio(this.content);
                    this.maxRelativeRatio = getMaxPropertyValue(this.content, 'relativePosRatio');
                    this._calcRelativeHeight(this.content, this.maxRelativeRatio);
                    this._addMissingRelativeHeight(this.content);
                }
            }
        }
function() {
            this.$el.addClass('timeline-me-container');

            if(this.settings.orientation == 'horizontal') {
                this.$el.addClass('timeline-me-horizontal');
                if(this.settings.scrollBar == false)
                    this.$el.addClass('no-x-scroll');
            } else {
                this.$el.addClass('timeline-me-vertical');
                if(this.settings.scrollBar == false)
                    this.$el.addClass('no-y-scroll');
            }

            var timelineWrapper = $('<div class="timeline-me-wrapper">');
            this.$el.append(timelineWrapper);

            var track = $('<div class="timeline-me-track">');
            timelineWrapper.append(track);

            if(this.settings.scrollZones == true) {
                var leftScroll = $('<div class="timeline-me-leftscroll">');
                var rightScroll = $('<div class="timeline-me-rightscroll">');
                timelineWrapper.before(leftScroll);
                timelineWrapper.after(rightScroll);

                bindScrollTo(leftScroll, rightScroll, timelineWrapper);
            }

            if(this.settings.scrollArrows == true) {
                var leftScroll;
                var rightScroll;
                if(this.settings.leftArrowElm == undefined) {
                    leftScroll = $('<span class="timeline-me-leftarrow">');
                } else {
                    leftScroll = $('<span class="timeline-me-leftarrow-c">');
                    leftScroll.html(this.settings.leftArrowElm);
                }
                if(this.settings.rightArrowElm == undefined) {
                    rightScroll = $('<span class="timeline-me-rightarrow">');
                } else {
                    rightScroll = $('<span class="timeline-me-rightarrow-c">');
                    rightScroll.html(this.settings.rightArrowElm);
                }
                timelineWrapper.before(leftScroll);
                timelineWrapper.after(rightScroll);

                bindScrollTo(leftScroll, rightScroll, timelineWrapper);
            }

            if(this.settings.items && this.settings.items.length > 0) {
                this.content = this.settings.items;

                if(hasNumberProperty(this.content, 'relativePosition')) {
                    this._sortItemsPosition(this.content);
                    this._mergeSamePositionItems(this.content);
                    this._calcDiffWithNextItem(this.content);
                }
                this._sortItemsPosition(this.content);
                this._fillItemsPosition(this.content);

                for(var i = 0; i < this.content.length; i++) {
                    track.append(this._createItemElement(this.content[i]));
                    if(this.settings.orientation == 'horizontal') {
                        resolveContainerWidth(track);
                    }
                }

                // once items' DOM elements have been built, we can reposition them
                if(hasNumberProperty(this.content, 'relativePosition')) {
                    this._calcRelativePosRatio(this.content);
                    this.maxRelativeRatio = getMaxPropertyValue(this.content, 'relativePosRatio');
                    this._calcRelativeHeight(this.content, this.maxRelativeRatio);
                    this._addMissingRelativeHeight(this.content);
                }
            }
        }
function ( ) { this . $el . addClass ( 'timeline-me-container' ) ; if ( this . settings . orientation == 'horizontal' ) { this . $el . addClass ( 'timeline-me-horizontal' ) ; if ( this . settings . scrollBar == false ) this . $el . addClass ( 'no-x-scroll' ) ; } else { this . $el . addClass ( 'timeline-me-vertical' ) ; if ( this . settings . scrollBar == false ) this . $el . addClass ( 'no-y-scroll' ) ; } var timelineWrapper = $ ( '<div class="timeline-me-wrapper">' ) ; this . $el . append ( timelineWrapper ) ; var track = $ ( '<div class="timeline-me-track">' ) ; timelineWrapper . append ( track ) ; if ( this . settings . scrollZones == true ) { var leftScroll = $ ( '<div class="timeline-me-leftscroll">' ) ; var rightScroll = $ ( '<div class="timeline-me-rightscroll">' ) ; timelineWrapper . before ( leftScroll ) ; timelineWrapper . after ( rightScroll ) ; bindScrollTo ( leftScroll , rightScroll , timelineWrapper ) ; } if ( this . settings . scrollArrows == true ) { var leftScroll ; var rightScroll ; if ( this . settings . leftArrowElm == undefined ) { leftScroll = $ ( '<span class="timeline-me-leftarrow">' ) ; } else { leftScroll = $ ( '<span class="timeline-me-leftarrow-c">' ) ; leftScroll . html ( this . settings . leftArrowElm ) ; } if ( this . settings . rightArrowElm == undefined ) { rightScroll = $ ( '<span class="timeline-me-rightarrow">' ) ; } else { rightScroll = $ ( '<span class="timeline-me-rightarrow-c">' ) ; rightScroll . html ( this . settings . rightArrowElm ) ; } timelineWrapper . before ( leftScroll ) ; timelineWrapper . after ( rightScroll ) ; bindScrollTo ( leftScroll , rightScroll , timelineWrapper ) ; } if ( this . settings . items && this . settings . items . length > 0 ) { this . content = this . settings . items ; if ( hasNumberProperty ( this . content , 'relativePosition' ) ) { this . _sortItemsPosition ( this . content ) ; this . _mergeSamePositionItems ( this . content ) ; this . _calcDiffWithNextItem ( this . content ) ; } this . _sortItemsPosition ( this . content ) ; this . _fillItemsPosition ( this . content ) ; for ( var i = 0 ; i < this . content . length ; i ++ ) { track . append ( this . _createItemElement ( this . content [ i ] ) ) ; if ( this . settings . orientation == 'horizontal' ) { resolveContainerWidth ( track ) ; } } // once items' DOM elements have been built, we can reposition them if ( hasNumberProperty ( this . content , 'relativePosition' ) ) { this . _calcRelativePosRatio ( this . content ) ; this . maxRelativeRatio = getMaxPropertyValue ( this . content , 'relativePosRatio' ) ; this . _calcRelativeHeight ( this . content , this . maxRelativeRatio ) ; this . _addMissingRelativeHeight ( this . content ) ; } } }
Initialize the plugin instance.
Set any other attribtes, store any other element reference, register
listeners, etc

When bind listerners remember to name tag it with your plugin's name.
Elements can have more than one listener attached to the same event
so you need to tag it to unbind the appropriate listener on destroy:

@example
this.$someSubElement.on('click.' + pluginName, function() {
// Do something
});
Initialize the plugin instance . Set any other attribtes store any other element reference register listeners etc