Scroller (jQuery-UI) v4

by amindunited

HTML

<div class="exampleWrap" id="example_1">
    <div class="exampleInfo">
        <div class="title">Default</div>
        <div class="beforeExample"></div>
        <div class="desc">
            <pre>$("#default_side_scroller .scrollable").scroller();</pre>
        </div>
    </div>
    <div class="ux_elm clearfix" id="default_side_scroller">
        <div class="scrollable">
            <div class="scroll_content">
                <ul class="list">
                </ul>
            </div>
            <div class="scrollButton left_scroll">&#9664;</div>
            <div class="scrollButton right_scroll">&#9654;</div>
        </div>
    </div>
    <div class="afterExample"></div>
</div>
<hr/>
            
<!--  vertical scroller -->
<div class="exampleWrap" id="example_2">
    <div class="exampleInfo">
        <div class="title">Default Vertical</div>
        <div class="beforeExample"></div>
        <div class="desc">
            <pre>$("#default_vertical_scroller .scrollable").scroller({type:"vertical"});</pre>
        </div>
    </div>
    <div class="ux_elm clearfix" id="default_vertical_scroller">
        <div class="scrollable">
            <div class="scrollButton up_scroll">&#9650;</div>
            <div class="scroll_content">
                <ul class="list">
                </ul>
            </div>
            <div class="scrollButton down_scroll">&#9660;</div>
        </div>
    </div>
    <div class="afterExample"></div>
</div>
<hr/>
<!--  Small Auto scroller -->
<div class="exampleWrap" id="example_3">
    <div class="exampleInfo">
        <div class="title">Small Auto</div>
        <div class="beforeExample"></div>
        <div class="desc">
            <pre>$("#small_auto_scroller .scrollable").scroller({autoScroll:true, seamless:true});</pre>
        </div>
    </div>
    <div class="ux_elm clearfix" id="small_auto_scroller">
        <div class="scrollable">
            <div class="scroll_content">
                <ul class="list">
               ...

CSS

/*==============================================================================================*/
            /* Example 01 - Default*/
/* ------------- SOF Default Required CSS ------*/
#default_side_scroller { }
#default_side_scroller .scroll_content {width: 800px; height: 120px; overflow:hidden; }
#default_side_scroller .scroll_content ul {height: 120px;}
#default_side_scroller .scroll_content ul li {width: 200px; height: 120px; display:inline-block; }
/* ------------- EOF Default Required CSS ------*/
/* ------------- SOF Default Layout CSS ------*/
/*----this is not required, it's just to layout the example --*/
#default_side_scroller {width:800px; position:relative; }
#default_side_scroller .scrollButton{ 
    position:absolute;
    text-align:center;
    line-height:40px; 
    top:40px;
    width: 30px;
    height: 40px; 
    background-color: rgba(200, 200, 200, .5);
    border-radius: 5px;
}
#default_side_scroller .left_scroll{ left:0px;}
#default_side_scroller .right_scroll{ right:0px;}
/* ------------- EOF Default Layout CSS ------*/

/* ------------- SOF Default Extra CSS ------*/
#example_1 {width:800px; margin-left:auto; margin-right:auto;}
#default_side_scroller .scroll_content ul li img {width: 200px; height: 120px;}
#default_side_scroller .scroll_content ul li {position:relative;}
#default_side_scroller .scroll_content ul li .image_details { position:absolute; top:10; left:10}

/* ------------- EOF Default Extra CSS ------*/
/*==============================================================================================*/
            /* Example 02 - Default Vertical */
/* ------------- SOF Example 02 Required CSS ------*/
#default_vertical_scroller {}
#default_vertical_scroller .scroll_content {width: 800px; height: 120px; overflow:hidden; }
#default_vertical_scroller .scroll_content ul { width: 800px; }
#default_vertical_scroller .scroll_content ul li {width: 200px; height: 120px; float:left; }
#default_vertical_scroller .scroll_content ul...

JavaScript

(function( $ ){
    var params = {
        //Vars
        currentRate : null,//The distance of a scroll (increases on hold) *defaults to the step value
        clickWait : 500,//number of ms before event is a "hold" not "click"
        eventType : "click", //hold or click
        //seamless : true,
        frames : [], //array of grouped elements for each 'frame'
        //intialized : false,
        currentFrame : 0,
        afterFunction : function(){},
        //Timers
        holdTimer : null,//Timer for a mouseHold Event
        clickTimer: null,//Timer a mouseClick
        autoScrollTimer:null,//
    
    }
    var methods = {
        init : function( options ){
            var args = $.extend({}, $.fn.scroller.defaults, options);//join the arguments and the default values
            args = $.extend({}, params, args);//join the params into the arguments, and default values
    
            //'this' will get lost, so we'll hold it in data.el (el for element...the element key is used for the el's className or id) 
            args.el = this;
    
            //For now, overwrite the step option with the width/hieght of the display area, it makes thing easier
            if (args.type=="vertical"){
                args.step = $(args.target, $(args.el)).height();
            }
            else {                    
                args.step = $(args.target, $(args.el)).width();
            }
    
            var $this = $(this),
                data = $this.data('scroller')
                
            if( !data ){
                $(this).data('scroller', args)
            }
            
            if ( args.addFills || args.seamless ){
                methods.addFillerElements.apply( $(this) );
            }    
            if ( !args.seamless ){
                methods.fixLayout.apply( $(this) );
            }
            else {
                methods.makeSeamless.apply( $(this) );
            }
            
            methods.markFrames.apply( $(this)...