https://foulees.com/shop/js/thumbelina.js

1/*
2    Thumbelina Content Slider
3    V1.0 Rev 1302190900
4
5    A lightweight horizontal and vertical content slider designed for image thumbnails.
6    http://www.starplugins.com/thumbelina
7
8    Developed by Star Plugins
9    http://www.starplugins.com
10
11    Copyright 2013, Star Plugins, www.starplugins.com
12    License: GNU General Public License, version 3 (GPL-3.0)
13    http://www.opensource.org/licenses/gpl-3.0.html
14*/
15;(function($) {
16    $.fn.Thumbelina = function(settings) {
17        var $container = this,      // Handy reference to container.
18            $list = $('ul',this),   // Handy reference to the list element.
19            moveDir = 0,            // Current direction of movement.
20            pos = 0,                // Current actual position.
21            destPos = 0,            // Current destination position.
22            listDimension = 0,      // Size (width or height depending on orientation) of list element.
23            idle = 0,
24            outerFunc,
25            orientData;              // Stores function calls and CSS attribute for horiz or vert mode.
26        
27        // Add thumblina CSS class, and create an inner wrapping container, within which the list will slide with overflow hidden.
28        $list.addClass('thumbelina').wrap('<div style="position:absolute;overflow:hidden;width:100%;height:100%;">');
29        // Create settings by merging user settings into defaults.
30        settings = $.extend({}, $.fn.Thumbelina.defaults, settings);
31        
32        // Depending on vertical or horizontal, get functions to call and CSS attribute to change.
33        if(settings.orientation === 'vertical') 
34            orientData = {outerSizeFunc:  'outerHeight', cssAttr: 'top', display: 'block'};
35        else
36            orientData = {outerSizeFunc:  'outerWidth', cssAttr: 'left', display: 'inline-block'};
37       
38        // Apply display type of list items.
39        $('li',$list).css({display: orientData.display});
40        
41        // Function to bind events to buttons.
42        var bindButEvents = function($elem,dir) {
43            $elem.bind('mousedown mouseup touchend touchstart',function(evt) {
44                if (evt.type==='mouseup' || evt.type==='touchend') moveDir = 0;
45                else moveDir = dir;
46                return false;
47            });
48        };
49        
50        // Bind the events.
51        bindButEvents(settings.$bwdBut,1);
52        bindButEvents(settings.$fwdBut,-1);
53        
54        // Store ref to outerWidth() or outerHeight() function.
55        outerFunc = orientData.outerSizeFunc; 
56   
57        // Function to animate. Moves the list element inside the container.
58        // Does various bounds checks.
59        var animate = function() {
60            var minPos;
61            
62            // If no movement or resize for 100 cycles, then go into 'idle' mode to save CPU.
63            if (!moveDir && pos === destPos && listDimension === $container[outerFunc]() ) {  
64                idle++;
65                if (idle>100) return;
66            }else {
67                 // Make a note of current size for idle comparison next cycle.
68                listDimension = $container[outerFunc]();
69                idle = 0;
70            }
71          
72            // Update destination pos.
73            destPos += settings.maxSpeed * moveDir;
74     
75            // Work out minimum scroll position.
76            // This will also cause the thumbs to drag back out again when increasing container size.
77            minPos = listDimension - $list[outerFunc]();
78            
79          
80            // Minimum pos should always be <= 0;
81            if (minPos > 0) minPos = 0;
82            // Bounds check (maximum advance i.e list moving left/up)
83            if (destPos < minPos) destPos = minPos;
84            // Bounds check (maximum retreat i.e list moving right/down)
85            if (destPos>0) destPos = 0;
86            
87            // Disable/enable buttons depending min/max extents.
88            if (destPos === minPos) settings.$fwdBut.addClass('disabled');
89            else settings.$fwdBut.removeClass('disabled');
90            if (destPos === 0) settings.$bwdBut.addClass('disabled');
91            else settings.$bwdBut.removeClass('disabled');
92            
93            // Animate towards destination with a simple easing calculation.
94            pos += (destPos - pos) / settings.easing;
95            
96            // If within 1000th of a pixel to dest, then just 'snap' to exact value.
97            // Do this so pos will end up exactly == destPos (deals with rounding errors).
98            if (Math.abs(destPos-pos)<0.001) pos = destPos;
99            
100            $list.css(orientData.cssAttr, Math.floor(pos));
101        };
102        
103        setInterval(function(){
104            animate();
105        },1000/60);
106    };
107    
108    $.fn.Thumbelina.defaults = {
109        orientation:    "horizontal",   // Orientation mode, horizontal or vertical.
110        easing:         6,              // Amount of easing (min 1) larger = more drift.
111        maxSpeed:       30,              // Max speed of movement (pixels per cycle).
112        $bwdBut:   null,                // jQuery element used as backward button.
113        $fwdBut:    null                // jQuery element used as forward button.
114    };
115    
116})(jQuery);
117