JAVASCRIPT   57

jquery cycle lite js

Guest on 17th August 2022 12:27:06 AM

  1. /*!
  2.  * jQuery Cycle Lite Plugin
  3.  * http://malsup.com/jquery/cycle/lite/
  4.  * Copyright (c) 2008-2011 M. Alsup
  5.  * Version: 1.3.1 (07-OCT-2011)
  6.  * Dual licensed under the MIT and GPL licenses:
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.gnu.org/licenses/gpl.html
  9.  * Requires: jQuery v1.3.2 or later
  10.  */
  11. ;(function($) {
  12.  
  13. var ver = 'Lite-1.3';
  14.  
  15. $.fn.cycle = function(options) {
  16.     return this.each(function() {
  17.         options = options || {};
  18.        
  19.         if (this.cycleTimeout) clearTimeout(this.cycleTimeout);
  20.         this.cycleTimeout = 0;
  21.         this.cyclePause = 0;
  22.        
  23.         var $cont = $(this);
  24.         var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children();
  25.         var els = $slides.get();
  26.         if (els.length < 2) {
  27.             window.console && console.log('terminating; too few slides: ' + els.length);
  28.             return; // don't bother
  29.         }
  30.  
  31.         // support metadata plugin (v1.0 and v2.0)
  32.         var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {});
  33.                 var meta = $.isFunction($cont.data) ? $cont.data(opts.metaAttr) : null;
  34.                 if (meta)
  35.                         opts = $.extend(opts, meta);
  36.            
  37.         opts.before = opts.before ? [opts.before] : [];
  38.         opts.after = opts.after ? [opts.after] : [];
  39.         opts.after.unshift(function(){ opts.busy=0; });
  40.            
  41.         // allow shorthand overrides of width, height and timeout
  42.         var cls = this.className;
  43.         opts.width = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width;
  44.         opts.height = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height;
  45.         opts.timeout = parseInt((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout;
  46.  
  47.         if ($cont.css('position') == 'static')
  48.             $cont.css('position', 'relative');
  49.         if (opts.width)
  50.             $cont.width(opts.width);
  51.         if (opts.height && opts.height != 'auto')
  52.             $cont.height(opts.height);
  53.  
  54.         var first = 0;
  55.         $slides.css({position: 'absolute', top:0, left:0}).each(function(i) {
  56.             $(this).css('z-index', els.length-i)
  57.         });
  58.        
  59.         $(els[first]).css('opacity',1).show(); // opacity bit needed to handle reinit case
  60.         if ($.browser.msie) els[first].style.removeAttribute('filter');
  61.  
  62.         if (opts.fit && opts.width)
  63.             $slides.width(opts.width);
  64.         if (opts.fit && opts.height && opts.height != 'auto')
  65.             $slides.height(opts.height);
  66.         if (opts.pause)
  67.             $cont.hover(function(){this.cyclePause=1;}, function(){this.cyclePause=0;});
  68.  
  69.         var txFn = $.fn.cycle.transitions[opts.fx];
  70.                 txFn && txFn($cont, $slides, opts);
  71.        
  72.         $slides.each(function() {
  73.             var $el = $(this);
  74.             this.cycleH = (opts.fit && opts.height) ? opts.height : $el.height();
  75.             this.cycleW = (opts.fit && opts.width) ? opts.width : $el.width();
  76.         });
  77.  
  78.         if (opts.cssFirst)
  79.             $($slides[first]).css(opts.cssFirst);
  80.  
  81.         if (opts.timeout) {
  82.             // ensure that timeout and speed settings are sane
  83.             if (opts.speed.constructor == String)
  84.                 opts.speed = {slow: 600, fast: 200}[opts.speed] || 400;
  85.             if (!opts.sync)
  86.                 opts.speed = opts.speed / 2;
  87.             while((opts.timeout - opts.speed) < 250)
  88.                 opts.timeout += opts.speed;
  89.         }
  90.         opts.speedIn = opts.speed;
  91.         opts.speedOut = opts.speed;
  92.  
  93.                 opts.slideCount = els.length;
  94.         opts.currSlide = first;
  95.         opts.nextSlide = 1;
  96.  
  97.         // fire artificial events
  98.         var e0 = $slides[first];
  99.         if (opts.before.length)
  100.             opts.before[0].apply(e0, [e0, e0, opts, true]);
  101.         if (opts.after.length > 1)
  102.             opts.after[1].apply(e0, [e0, e0, opts, true]);
  103.        
  104.         if (opts.click && !opts.next)
  105.             opts.next = opts.click;
  106.         if (opts.next)
  107.             $(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)});
  108.         if (opts.prev)
  109.             $(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)});
  110.  
  111.         if (opts.timeout)
  112.             this.cycleTimeout = setTimeout(function() {
  113.                 go(els,opts,0,!opts.rev)
  114.             }, opts.timeout + (opts.delay||0));
  115.     });
  116. };
  117.  
  118. function go(els, opts, manual, fwd) {
  119.     if (opts.busy) return;
  120.     var p = els[0].parentNode, curr = els[opts.currSlide], next = els[opts.nextSlide];
  121.     if (p.cycleTimeout === 0 && !manual)
  122.         return;
  123.  
  124.     if (manual || !p.cyclePause) {
  125.         if (opts.before.length)
  126.             $.each(opts.before, function(i,o) { o.apply(next, [curr, next, opts, fwd]); });
  127.         var after = function() {
  128.             if ($.browser.msie)
  129.                 this.style.removeAttribute('filter');
  130.             $.each(opts.after, function(i,o) { o.apply(next, [curr, next, opts, fwd]); });
  131.             queueNext();
  132.         };
  133.  
  134.         if (opts.nextSlide != opts.currSlide) {
  135.             opts.busy = 1;
  136.             $.fn.cycle.custom(curr, next, opts, after);
  137.         }
  138.         var roll = (opts.nextSlide + 1) == els.length;
  139.         opts.nextSlide = roll ? 0 : opts.nextSlide+1;
  140.         opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
  141.     }
  142.    
  143.     function queueNext() {
  144.         if (opts.timeout)
  145.             p.cycleTimeout = setTimeout(function() { go(els,opts,0,!opts.rev) }, opts.timeout);
  146.     }
  147. };
  148.  
  149. // advance slide forward or back
  150. function advance(els, opts, val) {
  151.     var p = els[0].parentNode, timeout = p.cycleTimeout;
  152.     if (timeout) {
  153.         clearTimeout(timeout);
  154.         p.cycleTimeout = 0;
  155.     }
  156.     opts.nextSlide = opts.currSlide + val;
  157.     if (opts.nextSlide < 0) {
  158.         opts.nextSlide = els.length - 1;
  159.     }
  160.     else if (opts.nextSlide >= els.length) {
  161.         opts.nextSlide = 0;
  162.     }
  163.     go(els, opts, 1, val>=0);
  164.     return false;
  165. };
  166.  
  167. $.fn.cycle.custom = function(curr, next, opts, cb) {
  168.     var $l = $(curr), $n = $(next);
  169.     $n.css(opts.cssBefore);
  170.     var fn = function() {$n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb)};
  171.     $l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() {
  172.         $l.css(opts.cssAfter);
  173.         if (!opts.sync) fn();
  174.     });
  175.     if (opts.sync) fn();
  176. };
  177.  
  178. $.fn.cycle.transitions = {
  179.     fade: function($cont, $slides, opts) {
  180.                 $slides.not(':eq(0)').hide();
  181.                 opts.cssBefore = { opacity: 0, display: 'block' };
  182.                 opts.cssAfter  = { display: 'none' };
  183.                 opts.animOut = { opacity: 0 };
  184.                 opts.animIn = { opacity: 1 };
  185.     },
  186.     fadeout: function($cont, $slides, opts) {
  187.                 opts.before.push(function(curr,next,opts,fwd) {
  188.                         $(curr).css('zIndex',opts.slideCount + (fwd === true ? 1 : 0));
  189.                         $(next).css('zIndex',opts.slideCount + (fwd === true ? 0 : 1));
  190.                 });
  191.                 $slides.not(':eq(0)').hide();
  192.                 opts.cssBefore = { opacity: 1, display: 'block', zIndex: 1 };
  193.                 opts.cssAfter  = { display: 'none', zIndex: 0 };
  194.                 opts.animOut = { opacity: 0 };
  195.     }
  196. };
  197.  
  198. $.fn.cycle.ver = function() { return ver; };
  199.  
  200. // @see: http://malsup.com/jquery/cycle/lite/
  201. $.fn.cycle.defaults = {
  202.         animIn:        {},
  203.         animOut:       {},
  204.         fx:           'fade',
  205.     after:         null,
  206.     before:        null,
  207.         cssBefore:     {},
  208.         cssAfter:      {},
  209.     delay:         0,    
  210.     fit:           0,    
  211.     height:       'auto',
  212.         metaAttr:     'cycle',
  213.     next:          null,
  214.     pause:         0,    
  215.     prev:          null,
  216.     speed:         1000,
  217.     slideExpr:     null,
  218.     sync:          1,    
  219.     timeout:       4000
  220. };
  221.  
  222. })(jQuery);

Raw Paste


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