JAVASCRIPT   5

jquery.touchSlider.js

Guest on 15th August 2021 07:07:41 AM

  1. /**
  2.  * @name        jQuery.touchSlider
  3.  * @version     201209_2
  4.  * @since       201106
  5.  * @param Object        settings        환경변수 ì˜¤ë¸Œì íŠ¸
  6.  *              roll                    -       순환 (default true)
  7.  *              flexible                -       ìœ ë™ ë ˆì´ì•„ì›ƒ (default false)
  8.  *              view                    -       다중 컬럼 (default 1)
  9.  *              speed                   -       ì• ë‹ˆë©”ì´ì…˜ 속도 (default 75)
  10.  *              range                   -       넘김 íŒì • 범위 (default 0.15)
  11.  *              page                    -       초기 페이지 (default 1)
  12.  *              transition              -       CSS3 transition 사용 (default false)
  13.  *              btn_prev                -       prev 버튼 (jQuery Object, default null)
  14.  *              btn_next                -       next 버튼 (jQuery Object, default null)
  15.  *              paging                  -       page 버튼 (jQuery Object, default null)
  16.  *              initComplete    -       초기화 콜백
  17.  *              counter                 -       슬라이드 콜백, ì¹´ìš´í„°
  18.  *
  19.  * @example
  20.         $("#target").touchSlider({
  21.                 flexible : true
  22.         });
  23. */ null)
  24.  *              initComplete    -       초기화 콜백
  25.  *              counter                 -       슬라이드 콜백, ì¹´ìš´í„°
  26.  *
  27.  * @example
  28.         $("#target").touchSlider({
  29.                 flexible : true
  30.         });
  31. */
  32.  
  33. (function ($) {
  34.        
  35.         $.fn.touchSlider = function (settings) {
  36.                
  37.                 settings.supportsCssTransitions = (function (style) {
  38.                         var prefixes = ['Webkit','Moz','Ms'];
  39.                         for(var i=0, l=prefixes.length; i < l; i++ ) {
  40.                                 if( typeof style[prefixes[i] + 'Transition'] !== 'undefined') {
  41.                                         return true;
  42.                                 }
  43.                         }
  44.                         return false;
  45.                 })(document.createElement('div').style);
  46.                
  47.                 settings = jQuery.extend({
  48.                         roll : true,
  49.                         flexible : false,
  50.                         btn_prev : null,
  51.                         btn_next : null,
  52.                         paging : null,
  53.                         speed : 75,
  54.                         view : 1,
  55.                         range : 0.15,
  56.                         page : 1,
  57.                         transition : false,
  58.                         initComplete : null,
  59.                         counter : null,
  60.                         multi : false
  61.                 }, settings);
  62.                
  63.                 var opts = [];
  64.                 opts = $.extend({}, $.fn.touchSlider.defaults, settings);
  65.                
  66.                 return this.each(function () {
  67.                        
  68.                         $.fn.extend(this, touchSlider);
  69.                        
  70.                         var _this = this;
  71.                        
  72.                         this.opts = opts;
  73.                         this._view = this.opts.view;
  74.                         this._speed = this.opts.speed;
  75.                         this._tg = $(this);
  76.                         this._list = this._tg.children().children();
  77.                         this._width = parseInt(this._tg.css("width"));
  78.                         this._item_w = parseInt(this._list.css("width"));
  79.                         this._len = this._list.length;
  80.                         this._range = this.opts.range * this._width;
  81.                         this._pos = [];
  82.                         this._start = [];
  83.                         this._startX = 0;
  84.                         this._startY = 0;
  85.                         this._left = 0;
  86.                         this._top = 0;
  87.                         this._drag = false;
  88.                         this._scroll = false;
  89.                         this._btn_prev;
  90.                         this._btn_next;
  91.                        
  92.                         this.init();
  93.                        
  94.                         $(this)
  95.                         .bind("touchstart", this.touchstart)
  96.                         .bind("touchmove", this.touchmove)
  97.                         .bind("touchend", this.touchend)
  98.                         .bind("dragstart", this.touchstart)
  99.                         .bind("drag", this.touchmove)
  100.                         .bind("dragend", this.touchend)
  101.                        
  102.                         $(window).bind("orientationchange resize", function () {
  103.                                 _this.resize(_this);
  104.                         });
  105.                 });
  106.        
  107.         };
  108.        
  109.         var touchSlider = {
  110.                
  111.                 init : function () {
  112.                         var _this = this;
  113.                        
  114.                         $(this).children().css({
  115.                                 "width":this._width + "px",
  116.                                 "overflow":"visible"
  117.                         });
  118.                        
  119.                         if(this.opts.flexible) this._item_w = this._width / this._view;
  120.                         if(this.opts.roll) this._len = Math.ceil(this._len / this._view) * this._view;
  121.                        
  122.                         var page_gap = (this.opts.page > 1 && this.opts.page <= this._len) ? (this.opts.page - 1) * this._item_w : 0;
  123.                        
  124.                         for(var i=0; i<this._len; ++i) {
  125.                                 this._pos[i] = this._item_w * i - page_gap;
  126.                                 this._start[i] = this._pos[i];
  127.                                 this._list.eq(i).css({
  128.                                         "float" : "none",
  129.                                         "display" : "block",
  130.                                         "position" : "absolute",
  131.                                         "top" : "0",
  132.                                         "left" : this._pos[i] + "px",
  133.                                         "width" : this._item_w + "px"
  134.                                 });
  135.                                 if(this.opts.supportsCssTransitions && this.opts.transition) {
  136.                                         this._list.eq(i).css({
  137.                                                 "-moz-transition" : "0ms" : "                           "-moz-transform" : "",
  138.                                                 "-ms-transition" : "0ms",
  139.                                                 "-ms-transform" : "",
  140.                                                 "-webkit-transition" : "0ms",
  141.                                                 "-webkit-transform" : "",
  142.                                                 "transition" : "0ms",
  143.                                                 "transform" : ""
  144.                                         });
  145.                                 }
  146.                         }
  147.                        
  148.                         if(this.opts.btn_prev && this.opts.btn_next) {
  149.                                 this.opts.btn_prev.bind("click", function() {
  150.                                         _this.animate(1, true);
  151.                                         return//var btn_page = _this.opts.paging.eq(0).clone();
  152. , function() {
  153.                                         _this.animate(-1, true);
  154.                                         //_this.opts.paging.before(btn_page);
  155. his.opts.paging) {
  156.                                 $(this._list).each(function (i, el) {
  157.                                         //var btn_page = _this.opts.paging.eq(0).clone();
  158.                                         //this.opts.paging.remove();
  159. ing.eq(i);
  160.                                         //_this.opts.paging.before(btn_page);
  161.                                        
  162.                                         btn_page.bind("click", function(e) {
  163.                                                 _this.go_page(i, e);
  164.                                                 return false;
  165.                                         });
  166.                                 });
  167.                                
  168.                                 //this.opts.paging.remove();
  169.                         }
  170.                        
  171.                         this.counter();
  172.                         this.initComplete();
  173.                 },
  174.                
  175.                 initComplete : function () {
  176.                         if(typeof(this.opts.initComplete) == "function") {
  177.                                 this.opts.initComplete(this);
  178.                         }
  179.                 },
  180.                
  181.                 resize : function (e) {
  182.                         if(e.opts.flexible) {
  183.                                 var tmp_w = e._item_w;
  184.                                
  185.                                 e._width = parseInt(e._tg.css("width"));
  186.                                 e._item_w = e._width / e._view;
  187.                                 e._range = e.opts.range * e._width;
  188.                                
  189.                                 for(var i=0; i<e._len; ++i) {
  190.                                         e._pos[i] = e._pos[i] / tmp_w * e._item_w;
  191.                                         e._start[i] = e._start[i] / tmp_w * e._item_w;
  192.                                         e._list.eq(i).css({
  193.                                                 "-moz-transform"i] + "px",
  194.                                                 "width" : e._item_w + "px"
  195.                                         });
  196.                                         if(this.opts.supportsCssTransitions && this.opts.transition) {
  197.                                                 e._list.eq(i).css({
  198.                                                         "-moz-transition" : "0ms",
  199.                                                         "-moz-transform" : "",
  200.                                                         "-ms-transition" : "0ms",
  201.                                                         "-ms-transform" : "",
  202.                                                         "-webkit-transition"touchstart"                                         "-webkit-transform" : "",
  203.                                                         "transition" : "dragstart"                      "transform" : ""
  204.                                                 });
  205.                                         }
  206.                                 }
  207.                         }
  208.                        
  209.                         this.counter();
  210.                 },
  211.                
  212.                 touchstart : function (e) {
  213.                         if((e.type == "touchstart" && e.originalEvent.touches.length <= 1) || e.type == "dragstart") {
  214.                                 this._startX = e.pageX || e.originalEvent.touches[0].pageX;
  215.                                 this._startY = e.pageY || e.originalEvent.touches[0].pageY;
  216.                                 this._scroll = false;
  217.                                
  218.                                 this._start = [];
  219.                                 for(var i=0; i<this._len; ++i) {
  220.                                         this._start[i] = this._pos[i];
  221.                                 }
  222.                         }
  223.                 },
  224.                
  225.                 touchmove : function (e) {
  226.                         if((e.type == "touchmove" && e.originalEvent.touches.length <= 1) || e.type == "drag") {
  227.                                 this._left = (e.pageX || e.originalEvent.touches[0].pageX) - this._startX;
  228.                                 this._top = (e.pageY || e.originalEvent.touches[0].pageY) - this._startY;
  229.                                 var w = this._left < 0 ? this._left * -1 : this._left;
  230.                                 var h = this._top < 0 ? this._top * -1 : this._top;
  231.                                
  232.                                 if (w < h || this._scroll) {
  233.                                         this._left = 0;
  234.                                         this._drag = false;
  235.                                         this._scroll = true;
  236.                                 } else {
  237.                                         e.preventDefault();
  238.                                         this._drag = true;
  239.                                         this._scroll = false;
  240.                                         this.position(e);
  241.                                 }
  242.                                
  243.                                 for(var i=0; i<this._len; ++i) {
  244.                                         var tmp = this._start[i] + this._left;
  245.                                        
  246.                                         if(this.opts.supportsCssTransitions && this.opts.transition) {
  247.                                                 var trans = " : trans,
  248.                                                         "p + "px,0,0)";
  249.                                                 this._list.eq(i).css({
  250.                                                         "left" : "",
  251.                                                         "-moz-transition"0ms"0ms",
  252.                                                         "-moz-transform" : trans,
  253.                                                         "-ms-transition" : "0ms",
  254.                                                         "-ms-transform" : trans,
  255.                                                         "-webkit-transition" : "0ms",
  256.                                                         "-webkit-transform" : trans,
  257.                                                         "transition" : "0ms"touchend""transform" : trans
  258.                                                 });
  259.                                         } else {
  260.                                                 this._list.eq(i).css("left", tmp + "px");
  261.                                         }
  262.                                        
  263.                                         this._pos[i] = tmp;
  264.                                 }
  265.                         }
  266.                 },
  267.                
  268.                 touchend : function (e) {
  269.                         if((e.type == "touchend" && e.originalEvent.touches.length <= 1) || e.type == "dragend") {
  270.                                 if(this._scroll) {
  271.                                         this._drag = false;
  272.                                         this._scroll = false;
  273.                                         return false;
  274.                                 }
  275.                                
  276.                                 this.animate(this.direction());
  277.                                 this._drag = false;
  278.                                 this._scroll = false;
  279.                         }
  280.                 },
  281.                
  282.                 position : function (d) {
  283.                         var gap = this._view * this._item_w;
  284.                        
  285.                         if(d == -1 || d == 1) {
  286.                                 this._startX = 0;
  287.                                 this._start = [];
  288.                                 for(var i=0; i<this._len; ++i) {
  289.                                         this._start[i] = this._pos[i];
  290.                                 }
  291.                                 this._left = d * gap;
  292.                         } else {
  293.                                 if(this._left > gap) this._left = gap;
  294.                                 if(this._left < - gap) this._left = - gap;
  295.                         }
  296.                        
  297.                         if(this.opts.roll) {
  298.                                 var tmp_pos = [];
  299.                                 for(var i=0; i<this._len; ++i) {
  300.                                         tmp_pos[i] = this._pos[i];
  301.                                 }
  302.                                 tmp_pos.sort(function(a,b){return a-b;});
  303.  
  304.                                
  305.                                 var max_chk = tmp_pos[this._len-this._view];
  306.                                 var p_min = $.inArray(tmp_pos[0], this._pos);
  307.                                 var p_max = $.inArray(max_chk, this._pos);
  308.  
  309.                                
  310.                                 if(this._view <= 1) max_chk = this._len - 1;
  311.                                 if(this.opts.multi) {
  312.                                         if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] >= 100)) {
  313.                                                 for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
  314.                                                         this._start[p_max] = this._start[p_min] - gap;
  315.                                                         this._list.eq(p_max).css("left", this._start[p_max] + "px");
  316.                                                 }
  317.                                         } else if((d == -1 && tmp_pos[0] <= 0) || (this._drag && tmp_pos[0] <= -100)) {
  318.                                                 for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
  319.                                                         this._start[p_min] = this._start[p_max] + gap;
  320.                                                         this._list.eq(p_min).css("left", this._start[p_min] + "px");
  321.                                                 }
  322.                                         }
  323.                                 } else {
  324.                                         if((d == 1 && tmp_pos[0] >= 0) || (this._drag && tmp_pos[0] > 0)) {
  325.                                                 for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
  326.                                                         this._start[p_max] = this._start[p_min] - gap;
  327.                                                         this._list.eq(p_max).css("left", this._start[p_max] + "px");
  328.                                                 }
  329.                                         } else if((d == -1 && tmp_pos[max_chk] <= 0) || (this._drag && tmp_pos[max_chk] <= 0)) {
  330.                                                 for(var i=0; i<this._view; ++i, ++p_min, ++p_max) {
  331.                                                         this._start[p_min] = this._start[p_max] + gap;
  332.                                                         this._list.eq(p_min).css("left", this._start[p_min] + "px");
  333.                                                 }
  334.                                         }
  335.                                 }
  336.                         } else {
  337.                                 if(this.limit_chk()) this._left = this._left / 2;
  338.                         }
  339.                 },
  340.                
  341.                 animate : function (d, btn_click) {
  342.                         if(this._drag || !this._scroll || btn_click) {
  343.                                 var _this = this;
  344.                                 var speed = this._speed;
  345.                                
  346.                                 if(btn_click) this.position(d);
  347.                                
  348.                                 var gap = d * (this._item_w * this._view);
  349.                                 if(this._left == 0 || (!this.opts.roll && this.limit_chk()) ) gap = 0;
  350.                                
  351.                                 this._list.each(function (i, el) {
  352.                                         _this._pos[i] = _this._start[i] + gap;
  353.                                        
  354.                                         if(_this.opts.supportsCssTransitions && _this.opts.transition) {
  355.                                                 var transition = speed + "ms";
  356.                                                 var transform = "translate3d(" + _this._pos[i] + "px,0,0)";
  357.                                                
  358.                                                 if(btn_click) transition = "0ms";
  359.                                                
  360.                                                 $(this).css({
  361.                                                         "left" : "",
  362.                                                         "-moz-transition" : transition,
  363.                                                         " : transition,
  364.                                                         "form,
  365.                                                         "-ms-transition" : transition,
  366.                                                         "-ms-transform" : transform,
  367.                                                         "-webkit-transition" : transition,
  368.                                                         "-webkit-transform" : transform,
  369.                                                         "transition" : transition,
  370.                                                         "transform" : transform
  371.                                                 });
  372.                                         } else {
  373.                                                 $(this).stop();
  374.                                                 $(this).animate({"left": _this._pos[i] + "px"}, speed);
  375.                                         }
  376.                                 });                    
  377.                                
  378.                                 this.counter();
  379.                         }
  380.                 },
  381.                
  382.                 direction : function () {
  383.                         var r = 0;
  384.                
  385.                         if(this._left < -(this._range)) r = -1;
  386.                         else if(this._left > this._range) r = 1;
  387.                        
  388.                         if(!this._drag || this._scroll) r = 0;
  389.                        
  390.                         return r;
  391.                 },
  392.                
  393.                 limit_chk : function () {
  394.                         var last_p = parseInt((this._len - 1) / this._view) * this._view;
  395.                         return ( (this._start[0] == 0 && this._left > 0) || (this._start[last_p] == 0 && this._left < 0) );
  396.                 },
  397.                
  398.                 go_page : function (i, e) {
  399.                         var crt = ($.inArray(0, this._pos) / this._view) + 1;
  400.                         var cal = crt - (i + 1);
  401.                        
  402.                         while(cal != 0) {
  403.                                 if(cal < 0) {
  404.                                         this.animate(-1, true);
  405.                                         cal++;
  406.                                 } else if(cal > 0) {
  407.                                         this.animate(1, true);
  408.                                         cal--;
  409.                                 }
  410.                         }
  411.                 },
  412.                
  413.                 counter : function () {
  414.                         if(typeof(this.opts.counter) ==

Raw Paste


Login or Register to edit or fork this paste. It's free.