Advertisement
Guest User

Untitled

a guest
Aug 14th, 2013
125
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  *   Unslider by @idiot and @damirfoy
  3.  */
  4.  
  5. (function($, f) {
  6.     var Unslider = function() {
  7.         //  Object clone
  8.         var _ = this;
  9.  
  10.         //  Set some options
  11.         _.o = {
  12.             speed: 500,   // animation speed, false for no transition (integer or boolean)
  13.             delay: 3000,  // delay between slides, false for no autoplay (integer or boolean)
  14.             init: 0,      // init delay, false for no delay (integer or boolean)
  15.             pause: !f,    // pause on hover (boolean)
  16.             loop: !f,     // infinitely looping (boolean)
  17.             keys: f,      // keyboard shortcuts (boolean)
  18.             dots: f,      // display ••••o• pagination (boolean)
  19.             arrows: f,    // display prev/next arrows (boolean)
  20.             prev: '←',    // text or html inside prev button (string)
  21.             next: '→',    // same as for prev option
  22.             fluid: f,     // is it a percentage width? (boolean)
  23.             complete: f,  // invoke after animation (function with argument)
  24.             items: '>ul', // slides container selector
  25.             item: '>li',   // slidable items selector
  26.             activeClass : 'active', // The active class for the slide
  27.         };
  28.  
  29.         _.init = function(el, o) {
  30.             //  Check whether we're passing any options in to Unslider
  31.             _.o = $.extend(_.o, o);
  32.  
  33.             _.el = el;
  34.             _.ul = el.find(_.o.items);
  35.             _.max = [el.outerWidth() | 0, el.outerHeight() | 0];
  36.             _.li = _.ul.find(_.o.item).each(function(index) {
  37.                 var me = $(this),
  38.                     width = me.outerWidth(),
  39.                     height = me.outerHeight();
  40.                 //  Set the max values
  41.                 if (width > _.max[0]) _.max[0] = width;
  42.                 if (height > _.max[1]) _.max[1] = height;
  43.  
  44.                 // If it is the first item, let's add the activeClass.
  45.                 if ( index == 0 ) {
  46.                     me.addClass( _.o.activeClass );
  47.                 }
  48.  
  49.             });
  50.  
  51.             //  Cached vars
  52.             var o = _.o,
  53.                 ul = _.ul,
  54.                 li = _.li,
  55.                 len = li.length;
  56.  
  57.             //  Current indeed
  58.             _.i = 0;
  59.  
  60.             //  Set the main element
  61.             el.css({width: _.max[0], height: li.first().outerHeight(), overflow: 'visible'});
  62.  
  63.             //  Set the relative widths
  64.             ul.css({position: 'relative', left: 0, width: (len * 100) + '%'});
  65.             li.css({'float': 'left', width: (100 / len) + '%'});
  66.  
  67.             //  Autoslide
  68.             setTimeout(function() {
  69.                 if (o.delay | 0) {
  70.                     _.play();
  71.  
  72.                     if (o.pause) {
  73.                         el.on('mouseover mouseout', function(e) {
  74.                             _.stop();
  75.                             e.type == 'mouseout' && _.play();
  76.                         });
  77.                     };
  78.                 };
  79.             }, o.init | 0);
  80.  
  81.             //  Keypresses
  82.             if (o.keys) {
  83.                 $(document).keydown(function(e) {
  84.                     var key = e.which;
  85.  
  86.                     if (key == 37)
  87.                         _.prev(); // Left
  88.                     else if (key == 39)
  89.                         _.next(); // Right
  90.                     else if (key == 27)
  91.                         _.stop(); // Esc
  92.                 });
  93.             };
  94.  
  95.             //  Dot pagination
  96.             o.dots && nav('dot');
  97.  
  98.             //  Arrows support
  99.             o.arrows && nav('arrow');
  100.  
  101.             //  Patch for fluid-width sliders. Screw those guys.
  102.             if (o.fluid) {
  103.                 $(window).resize(function() {
  104.                     _.r && clearTimeout(_.r);
  105.  
  106.                     _.r = setTimeout(function() {
  107.                         var styl = {height: li.eq(_.i).outerHeight()},
  108.                             width = el.outerWidth();
  109.  
  110.                         ul.css(styl);
  111.                         styl['width'] = Math.min(Math.round((width / el.parent().width()) * 100), 100) + '%';
  112.                         el.css(styl);
  113.                     }, 50);
  114.                 }).resize();
  115.             };
  116.  
  117.             //  Swipe support
  118.             if ($.event.special['swipe'] || $.Event('swipe')) {
  119.                 el.on('swipeleft swiperight swipeLeft swipeRight', function(e) {
  120.                     e.type.toLowerCase() == 'swipeleft' ? _.next() : _.prev();
  121.                 });
  122.             };
  123.  
  124.             return _;
  125.         };
  126.  
  127.         //  Move Unslider to a slide index
  128.         _.to = function(index, callback) {
  129.             var o = _.o,
  130.                 el = _.el,
  131.                 ul = _.ul,
  132.                 li = _.li,
  133.                 current = _.i,
  134.                 target = li.eq(index);
  135.  
  136.             //  To slide or not to slide
  137.             if ((!target.length || index < 0) && o.loop == f) return;
  138.  
  139.             //  Check if it's out of bounds
  140.             if (!target.length) index = 0;
  141.             if (index < 0) index = li.length - 1;
  142.             target = li.eq(index);
  143.  
  144.             var speed = callback ? 5 : o.speed | 0,
  145.                 obj = {};
  146.  
  147.             if (!ul.queue('fx').length) {
  148.                 //  Handle those pesky dots
  149.                 el.find('.dot').eq(index).addClass('active').siblings().removeClass('active');
  150.  
  151.                 el.animate(obj, speed).css('overflow', 'visible') && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) {
  152.                     _.i = index;
  153.  
  154.                     // Add an active class to the slide and remove it from the previous slide
  155.                     ul.children().removeClass( o.activeClass );
  156.                     target.addClass( o.activeClass );
  157.  
  158.                     $.isFunction(o.complete) && !callback && o.complete(el);
  159.                 });
  160.             };
  161.         };
  162.  
  163.         //  Autoplay functionality
  164.         _.play = function() {
  165.             _.t = setInterval(function() {
  166.                 _.to(_.i + 1);
  167.             }, _.o.delay | 0);
  168.         };
  169.  
  170.         //  Stop autoplay
  171.         _.stop = function() {
  172.             _.t = clearInterval(_.t);
  173.             return _;
  174.         };
  175.  
  176.         //  Move to previous/next slide
  177.         _.next = function() {
  178.             return _.stop().to(_.i + 1);
  179.         };
  180.  
  181.         _.prev = function() {
  182.             return _.stop().to(_.i - 1);
  183.         };
  184.  
  185.         //  Create dots and arrows
  186.         function nav(name, html) {
  187.             if (name == 'dot') {
  188.                 html = '<ol class="dots">';
  189.                     $.each(_.li, function(index) {
  190.                         html += '<li class="' + (index == _.i ? name + ' active' : name) + '">' + ++index + '</li>';
  191.                     });
  192.                 html += '</ol>';
  193.             } else {
  194.                 html = '<div class="';
  195.                 html = html + name + 's">' + html + name + ' prev">' + _.o.prev + '</div>' + html + name + ' next">' + _.o.next + '</div></div>';
  196.             };
  197.  
  198.             _.el.addClass('has-' + name + 's').append(html).find('.' + name).click(function() {
  199.                 var me = $(this);
  200.                 me.hasClass('dot') ? _.stop().to(me.index()) : me.hasClass('prev') ? _.prev() : _.next();
  201.             });
  202.         };
  203.     };
  204.  
  205.     //  Create a jQuery plugin
  206.     $.fn.unslider = function(o) {
  207.         var len = this.length;
  208.  
  209.         //  Enable multiple-slider support
  210.         return this.each(function(index) {
  211.             //  Cache a copy of $(this), so it
  212.             var me = $(this),
  213.                 key = 'unslider' + (len > 1 ? '-' + ++index : ''),
  214.                 instance = (new Unslider).init(me, o);
  215.  
  216.             //  Invoke an Unslider instance
  217.             me.data(key, instance).data('key', key);
  218.         });
  219.     };
  220. })(jQuery, false);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement