Advertisement
xynyn

Tiny Carousel + Looping Controls

Jul 27th, 2012
2,114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*!
  2.  * Tiny Carousel 1.9
  3.  * http://www.baijs.nl/tinycarousel
  4.  *
  5.  * Copyright 2010, Maarten Baijs
  6.  * Dual licensed under the MIT or GPL Version 2 licenses.
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.opensource.org/licenses/gpl-2.0.php
  9.  *
  10.  * Date: 01 / 06 / 2011
  11.  * Depends on library: jQuery
  12.  */
  13.  
  14.  /*!
  15.  *looping by Xynyn Vee
  16.  */
  17.  
  18. (function($){
  19.     $.tiny = $.tiny || { };
  20.    
  21.     $.tiny.carousel = {
  22.         options: { 
  23.             start: 1, // where should the carousel start?
  24.             display: 1, // how many blocks do you want to move at 1 time?
  25.             axis: 'x', // vertical or horizontal scroller? ( x || y ).
  26.             controls: true, // show left and right navigation buttons.
  27.             pager: false, // is there a page number navigation present?
  28.             interval: false, // move to another block on intervals.
  29.             intervaltime: 3000, // interval time in milliseconds.
  30.             rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
  31.             animation: true, // false is instant, true is animate.
  32.             duration: 1000, // how fast must the animation move in ms?
  33.             loop: true, //should pressing next on the last slide move to the first slide? Should pressing previous on the first slide move to the last?
  34.             callback: null // function that executes after every move.
  35.         }
  36.     };
  37.    
  38.     $.fn.tinycarousel = function(options) {
  39.         var options = $.extend({}, $.tiny.carousel.options, options);
  40.         this.each(function(){ $(this).data('tcl', new Carousel($(this), options)); });
  41.         return this;
  42.     };
  43.     $.fn.tinycarousel_start = function(){ $(this).data('tcl').start(); };
  44.     $.fn.tinycarousel_stop = function(){ $(this).data('tcl').stop(); };
  45.     $.fn.tinycarousel_move = function(iNum){ $(this).data('tcl').move(iNum-1,true); };
  46.    
  47.     function Carousel(root, options){
  48.         var oSelf = this;
  49.         var oViewport = $('.viewport:first', root);
  50.         var oContent = $('.overview:first', root);
  51.         var oPages = oContent.children();
  52.         var oBtnNext = $('.next:first', root);
  53.         var oBtnPrev = $('.prev:first', root);
  54.         var oPager = $('.pager:first', root);
  55.         var iPageSize, iSteps, iCurrent, oTimer, bPause, bForward = true, bAxis = options.axis == 'x';
  56.        
  57.         function initialize(){
  58.             iPageSize = bAxis ? $(oPages[0]).outerWidth(true) : $(oPages[0]).outerHeight(true);
  59.             var iLeftover = Math.ceil(((bAxis ? oViewport.outerWidth() : oViewport.outerHeight()) / (iPageSize * options.display)) -1);
  60.             iSteps = Math.max(1, Math.ceil(oPages.length / options.display) - iLeftover);
  61.             iCurrent = Math.min(iSteps, Math.max(1, options.start)) -2;
  62.             oContent.css(bAxis ? 'width' : 'height', (iPageSize * oPages.length));
  63.             oSelf.move(1);
  64.             setEvents();
  65.             return oSelf;
  66.         };
  67.         function setEvents(){
  68.             if(options.controls && oBtnPrev.length > 0 && oBtnNext.length > 0){
  69.                 if (options.loop) {
  70.                     oBtnPrev.click(function(){previous()});
  71.                     oBtnNext.click(function(){next()});
  72.                 }
  73.                 else {
  74.                     oBtnPrev.click(function(){oSelf.move(-1); return false;});
  75.                     oBtnNext.click(function(){oSelf.move( 1); return false;});
  76.                 }
  77.             }
  78.             if(options.interval){ root.hover(oSelf.stop,oSelf.start); }
  79.             if(options.pager && oPager.length > 0){ $('a',oPager).click(setPager); }
  80.         };
  81.         function setButtons(){
  82.             if(options.controls && !options.loop){
  83.                 oBtnPrev.toggleClass('disable', !(iCurrent > 0));
  84.                 oBtnNext.toggleClass('disable', !(iCurrent +1 < iSteps));
  85.             }
  86.             if(options.pager){
  87.                 var oNumbers = $('.pagenum', oPager);
  88.                 oNumbers.removeClass('active');
  89.                 $(oNumbers[iCurrent]).addClass('active');
  90.             }          
  91.         };
  92.         function setPager(oEvent){
  93.             if($(this).hasClass('pagenum')){ oSelf.move(parseInt(this.rel), true); }
  94.             return false;
  95.         };
  96.         function next () {
  97.             iCurrent = iCurrent +1 == iSteps ? -1 : iCurrent;
  98.             bForward = iCurrent +1 == iSteps ? false : iCurrent == 0 ? true : bForward;
  99.             oSelf.move(bForward ? 1 : -1);
  100.         }
  101.         function previous() {
  102.             iCurrent = iCurrent -1 == -1 ? iSteps : iCurrent;
  103.             bForward = iCurrent -1 == iSteps ? true : iCurrent == 0 ? false : bForward;
  104.             oSelf.move(bForward ? -1 : 1);
  105.         }
  106.         function setTimer(){
  107.             if(options.interval && !bPause){
  108.                 clearTimeout(oTimer);
  109.                 oTimer = setTimeout(function(){
  110.                     iCurrent = iCurrent +1 == iSteps ? -1 : iCurrent;
  111.                     bForward = iCurrent +1 == iSteps ? false : iCurrent == 0 ? true : bForward;
  112.                     oSelf.move(bForward ? 1 : -1);
  113.                 }, options.intervaltime);
  114.             }
  115.         };
  116.         this.stop = function(){ clearTimeout(oTimer); bPause = true; };
  117.         this.start = function(){ bPause = false; setTimer(); };
  118.         this.move = function(iDirection, bPublic){
  119.             iCurrent = bPublic ? iDirection : iCurrent += iDirection;
  120.             if(iCurrent > -1 && iCurrent < iSteps){
  121.                 var oPosition = {};
  122.                 oPosition[bAxis ? 'left' : 'top'] = -(iCurrent * (iPageSize * options.display));   
  123.                 oContent.animate(oPosition,{
  124.                     queue: false,
  125.                     duration: options.animation ? options.duration : 0,
  126.                     complete: function(){
  127.                         if(typeof options.callback == 'function')
  128.                         options.callback.call(this, oPages[iCurrent], iCurrent);
  129.                     }
  130.                 });
  131.                 setButtons();
  132.                 setTimer();
  133.             }
  134.         };
  135.         return initialize();
  136.     };
  137. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement