/* * jquery cycle plugin for light-weight slideshows * examples and documentation at: http://malsup.com/jquery/cycle/ * copyright (c) 2007-2008 m. alsup * version: 2.22 (06/08/2008) * dual licensed under the mit and gpl licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * requires: jquery v1.1.3.1 or later * * based on the work of: * 1) matt oakes (http://portfolio.gizone.co.uk/applications/slideshow/) * 2) torsten baldes (http://medienfreunde.com/lab/innerfade/) * 3) benjamin sterling (http://www.benjaminsterling.com/experiments/jqshuffle/) */ (function($) { var ver = '2.22'; var ie6 = $.browser.msie && /msie 6.0/.test(navigator.useragent); function log() { if (window.console && window.console.log) window.console.log('[cycle] ' + array.prototype.join.call(arguments,'')); }; $.fn.cycle = function(options) { return this.each(function() { options = options || {}; if (options.constructor == string) { switch(options) { case 'stop': if (this.cycletimeout) cleartimeout(this.cycletimeout); this.cycletimeout = 0; return; case 'pause': this.cyclepause = 1; return; case 'resume': this.cyclepause = 0; return; default: options = { fx: options }; }; } // stop existing slideshow for this container (if there is one) if (this.cycletimeout) cleartimeout(this.cycletimeout); this.cycletimeout = 0; this.cyclepause = 0; var $cont = $(this); var $slides = options.slideexpr ? $(options.slideexpr, this) : $cont.children(); var els = $slides.get(); if (els.length < 2) { log('terminating; too few slides: ' + els.length); return; // don't bother } // support metadata plugin (v1.0 and v2.0) var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {}); if (opts.autostop) opts.countdown = opts.autostopcount || els.length; opts.before = opts.before ? [opts.before] : []; opts.after = opts.after ? [opts.after] : []; opts.after.unshift(function(){ opts.busy=0; }); if (opts.continuous) opts.after.push(function() { go(els,opts,0,!opts.rev); }); // cleartype corrections if (ie6 && opts.cleartype && !opts.cleartypenobg) cleartypefix($slides); // allow shorthand overrides of width, height and timeout var cls = this.classname; opts.width = parseint((cls.match(/w:(\d+)/)||[])[1]) || opts.width; opts.height = parseint((cls.match(/h:(\d+)/)||[])[1]) || opts.height; opts.timeout = parseint((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout; if ($cont.css('position') == 'static') $cont.css('position', 'relative'); if (opts.width) $cont.width(opts.width); if (opts.height && opts.height != 'auto') $cont.height(opts.height); if (opts.random) { opts.randommap = []; for (var i = 0; i < els.length; i++) opts.randommap.push(i); opts.randommap.sort(function(a,b) {return math.random() - 0.5;}); opts.randomindex = 0; opts.startingslide = opts.randommap[0]; } else if (opts.startingslide >= els.length) opts.startingslide = 0; // catch bogus input var first = opts.startingslide || 0; $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; $(this).css('z-index', z) }); $(els[first]).css('opacity',1).show(); // opacity bit needed to handle reinit case if ($.browser.msie) els[first].style.removeattribute('filter'); if (opts.fit && opts.width) $slides.width(opts.width); if (opts.fit && opts.height && opts.height != 'auto') $slides.height(opts.height); if (opts.pause) $cont.hover(function(){this.cyclepause=1;}, function(){this.cyclepause=0;}); // run transition init fn var init = $.fn.cycle.transitions[opts.fx]; if ($.isfunction(init)) init($cont, $slides, opts); else if (opts.fx != 'custom') log('unknown transition: ' + opts.fx); $slides.each(function() { var $el = $(this); this.cycleh = (opts.fit && opts.height) ? opts.height : $el.height(); this.cyclew = (opts.fit && opts.width) ? opts.width : $el.width(); }); opts.cssbefore = opts.cssbefore || {}; opts.animin = opts.animin || {}; opts.animout = opts.animout || {}; $slides.not(':eq('+first+')').css(opts.cssbefore); if (opts.cssfirst) $($slides[first]).css(opts.cssfirst); if (opts.timeout) { // ensure that timeout and speed settings are sane if (opts.speed.constructor == string) opts.speed = {slow: 600, fast: 200}[opts.speed] || 400; if (!opts.sync) opts.speed = opts.speed / 2; while((opts.timeout - opts.speed) < 250) opts.timeout += opts.speed; } if (opts.easing) opts.easein = opts.easeout = opts.easing; if (!opts.speedin) opts.speedin = opts.speed; if (!opts.speedout) opts.speedout = opts.speed; opts.slidecount = els.length; opts.currslide = first; if (opts.random) { opts.nextslide = opts.currslide; if (++opts.randomindex == els.length) opts.randomindex = 0; opts.nextslide = opts.randommap[opts.randomindex]; } else opts.nextslide = opts.startingslide >= (els.length-1) ? 0 : opts.startingslide+1; // fire artificial events var e0 = $slides[first]; if (opts.before.length) opts.before[0].apply(e0, [e0, e0, opts, true]); if (opts.after.length > 1) opts.after[1].apply(e0, [e0, e0, opts, true]); if (opts.click && !opts.next) opts.next = opts.click; if (opts.next) $(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)}); if (opts.prev) $(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)}); if (opts.pager) buildpager(els,opts); // expose fn for adding slides after the show has started opts.addslide = function(newslide) { var $s = $(newslide), s = $s[0]; if (!opts.autostopcount) opts.countdown++; els.push(s); if (opts.els) opts.els.push(s); // shuffle needs this opts.slidecount = els.length; $s.css('position','absolute').appendto($cont); if (ie6 && opts.cleartype && !opts.cleartypenobg) cleartypefix($s); if (opts.fit && opts.width) $s.width(opts.width); if (opts.fit && opts.height && opts.height != 'auto') $slides.height(opts.height); s.cycleh = (opts.fit && opts.height) ? opts.height : $s.height(); s.cyclew = (opts.fit && opts.width) ? opts.width : $s.width(); $s.css(opts.cssbefore); if (typeof opts.onaddslide == 'function') opts.onaddslide($s); }; if (opts.timeout || opts.continuous) this.cycletimeout = settimeout( function(){go(els,opts,0,!opts.rev)}, opts.continuous ? 10 : opts.timeout + (opts.delay||0)); }); }; function go(els, opts, manual, fwd) { if (opts.busy) return; var p = els[0].parentnode, curr = els[opts.currslide], next = els[opts.nextslide]; if (p.cycletimeout === 0 && !manual) return; if (!manual && !p.cyclepause && ((opts.autostop && (--opts.countdown <= 0)) || (opts.nowrap && !opts.random && opts.nextslide < opts.currslide))) { if (opts.end) opts.end(opts); return; } if (manual || !p.cyclepause) { if (opts.before.length) $.each(opts.before, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); var after = function() { if ($.browser.msie && opts.cleartype) this.style.removeattribute('filter'); $.each(opts.after, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); }; if (opts.nextslide != opts.currslide) { opts.busy = 1; if (opts.fxfn) opts.fxfn(curr, next, opts, after, fwd); else if ($.isfunction($.fn.cycle[opts.fx])) $.fn.cycle[opts.fx](curr, next, opts, after); else $.fn.cycle.custom(curr, next, opts, after); } if (opts.random) { opts.currslide = opts.nextslide; if (++opts.randomindex == els.length) opts.randomindex = 0; opts.nextslide = opts.randommap[opts.randomindex]; } else { // sequence var roll = (opts.nextslide + 1) == els.length; opts.nextslide = roll ? 0 : opts.nextslide+1; opts.currslide = roll ? els.length-1 : opts.nextslide-1; } if (opts.pager) $.fn.cycle.updateactivepagerlink(opts.pager, opts.currslide); } if (opts.timeout && !opts.continuous) p.cycletimeout = settimeout(function() { go(els,opts,0,!opts.rev) }, opts.timeout); else if (opts.continuous && p.cyclepause) p.cycletimeout = settimeout(function() { go(els,opts,0,!opts.rev) }, 10); }; $.fn.cycle.updateactivepagerlink = function(pager, currslide) { $(pager).find('a').removeclass('activeslide').filter('a:eq('+currslide+')').addclass('activeslide'); }; // advance slide forward or back function advance(els, opts, val) { var p = els[0].parentnode, timeout = p.cycletimeout; if (timeout) { cleartimeout(timeout); p.cycletimeout = 0; } opts.nextslide = opts.currslide + val; if (opts.nextslide < 0) { if (opts.nowrap) return false; opts.nextslide = els.length - 1; } else if (opts.nextslide >= els.length) { if (opts.nowrap) return false; opts.nextslide = 0; } if (opts.prevnextclick && typeof opts.prevnextclick == 'function') opts.prevnextclick(val > 0, opts.nextslide, els[opts.nextslide]); go(els, opts, 1, val>=0); return false; }; function buildpager(els, opts) { var $p = $(opts.pager); $.each(els, function(i,o) { var $a = (typeof opts.pageranchorbuilder == 'function') ? $(opts.pageranchorbuilder(i,o)) : $(''+(i+1)+''); // don't reparent if anchor is in the dom if ($a.parents('body').length == 0) $a.appendto($p); $a.bind(opts.pagerevent, function() { opts.nextslide = i; var p = els[0].parentnode, timeout = p.cycletimeout; if (timeout) { cleartimeout(timeout); p.cycletimeout = 0; } if (typeof opts.pagerclick == 'function') opts.pagerclick(opts.nextslide, els[opts.nextslide]); go(els,opts,1,!opts.rev); return false; }); }); //$p.find('a').filter('a:eq('+opts.startingslide+')').addclass('activeslide'); $.fn.cycle.updateactivepagerlink(opts.pager, opts.startingslide); }; // this fixes cleartype problems in ie6 by setting an explicit bg color function cleartypefix($slides) { function hex(s) { var s = parseint(s).tostring(16); return s.length < 2 ? '0'+s : s; }; function getbg(e) { for ( ; e && e.nodename.tolowercase() != 'html'; e = e.parentnode) { var v = $.css(e,'background-color'); if (v.indexof('rgb') >= 0 ) { var rgb = v.match(/\d+/g); return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); } if (v && v != 'transparent') return v; } return '#ffffff'; }; $slides.each(function() { $(this).css('background-color', getbg(this)); }); }; $.fn.cycle.custom = function(curr, next, opts, cb) { var $l = $(curr), $n = $(next); $n.css(opts.cssbefore); var fn = function() {$n.animate(opts.animin, opts.speedin, opts.easein, cb)}; $l.animate(opts.animout, opts.speedout, opts.easeout, function() { if (opts.cssafter) $l.css(opts.cssafter); if (!opts.sync) fn(); }); if (opts.sync) fn(); }; $.fn.cycle.transitions = { fade: function($cont, $slides, opts) { $slides.not(':eq('+opts.startingslide+')').css('opacity',0); opts.before.push(function() { $(this).show() }); opts.animin = { opacity: 1 }; opts.animout = { opacity: 0 }; opts.cssbefore = { opacity: 0 }; opts.cssafter = { display: 'none' }; } }; $.fn.cycle.ver = function() { return ver; }; // override these globally if you like (they are all optional) $.fn.cycle.defaults = { fx: 'scollleft', // one of: fade, shuffle, zoom, scrollleft, etc timeout: 3000, // milliseconds between slide transitions (0 to disable auto advance) continuous: 0, // true to start next transition immediately after current one completes speed: 500, // speed of the transition (any valid fx speed value) speedin: null, // speed of the 'in' transition speedout: null, // speed of the 'out' transition next: null, // id of element to use as click trigger for next slide prev: null, // id of element to use as click trigger for previous slide prevnextclick: null, // callback fn for prev/next clicks: function(isnext, zerobasedslideindex, slideelement) pager: null, // id of element to use as pager container pagerclick: null, // callback fn for pager clicks: function(zerobasedslideindex, slideelement) pagerevent: 'click', // event which drives the pager navigation pageranchorbuilder: null, // callback fn for building anchor links before: null, // transition callback (scope set to element to be shown) after: null, // transition callback (scope set to element that was shown) end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options) easing: null, // easing method for both in and out transitions easein: null, // easing for "in" transition easeout: null, // easing for "out" transition shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 } animin: null, // properties that define how the slide animates in animout: null, // properties that define how the slide animates out cssbefore: null, // properties that define the initial state of the slide before transitioning in cssafter: null, // properties that defined the state of the slide after transitioning out fxfn: null, // function used to control the transition height: 'auto', // container height startingslide: 0, // zero-based index of the first slide to be displayed sync: 1, // true if in/out transitions should occur simultaneously random: 0, // true for random, false for sequence (not applicable to shuffle fx) fit: 0, // force slides to fit container pause: 1, // true to enable "pause on hover" autostop: 0, // true to end slideshow after x transitions (where x == slide count) autostopcount: 0, // number of transitions (optionally used with autostop to define x) delay: 0, // additional delay (in ms) for first transition (hint: can be negative) slideexpr: null, // expression for selecting slides (if something other than all children is required) cleartype: 0, // true if cleartype corrections should be applied (for ie) nowrap: 0 // true to prevent slideshow from wrapping }; })(jquery); /* * jquery cycle plugin transition definitions * this script is a plugin for the jquery cycle plugin * examples and documentation at: http://malsup.com/jquery/cycle/ * copyright (c) 2007-2008 m. alsup * version: 2.22 * dual licensed under the mit and gpl licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ (function($) { // // these functions define one-time slide initialization for the named // transitions. to save file size feel free to remove any of these that you // don't need. // // scrollleft/right $.fn.cycle.transitions.scrollleft = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssbefore.left = next.offsetwidth; opts.animout.left = 0-curr.offsetwidth; }); opts.cssfirst = { left: 0 }; opts.animin = { left: 0 }; }; $.fn.cycle.transitions.scrollright = function($cont, $slides, opts) { $cont.css('overflow','hidden'); opts.before.push(function(curr, next, opts) { $(this).show(); opts.cssbefore.left = 0-next.offsetwidth; opts.animout.left = curr.offsetwidth; }); opts.cssfirst = { left: 0 }; opts.animin = { left: 0 }; }; $.fn.cycle.transitions.scrollhorz = function($cont, $slides, opts) { $cont.css('overflow','hidden').width(); // $slides.show(); opts.before.push(function(curr, next, opts, fwd) { $(this).show(); var currw = curr.offsetwidth, nextw = next.offsetwidth; opts.cssbefore = fwd ? { left: nextw } : { left: -nextw }; opts.animin.left = 0; opts.animout.left = fwd ? -currw : currw; $slides.not(curr).css(opts.cssbefore); }); opts.cssfirst = { left: 0 }; opts.cssafter = { display: 'none' } }; })(jquery);