// JavaScript Document /* 2 * jQuery Cycle Plugin for light-weight slideshows 3 * Examples and documentation at: http://malsup.com/jquery/cycle/ 4 * Copyright (c) 2007-2008 M. Alsup 5 * Version: 2.10 (02/10/2008) 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.1.3.1 or later 10 * 11 * Based on the work of: 12 * 1) Matt Oakes (http://portfolio.gizone.co.uk/applications/slideshow/) 13 * 2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/) 14 * 3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/) 15 */ (function($) { 17 18 var ver = '2.10'; 19 var ie6 = $.browser.msie && /MSIE 6.0/.test(navigator.userAgent); 20 21 $.fn.cycle = function(options) { 22 return this.each(function() { 23 options = options || {}; 24 if (options.constructor == String) { 25 switch(options) { 26 case 'stop': 27 if (this.cycleTimeout) clearTimeout(this.cycleTimeout); 28 this.cycleTimeout = 0; 29 return; 30 case 'pause': 31 this.cyclePause = 1; 32 return; 33 case 'resume': 34 this.cyclePause = 0; 35 return; 36 default: 37 options = { fx: options }; 38 }; 39 } 40 var $cont = $(this); 41 var $slides = options.slideExpr ? $(options.slideExpr, this) : $cont.children(); 42 var els = $slides.get(); 43 if (els.length < 2) return; // don't bother 44 45 // support metadata plugin (v1.0 and v2.0) 46 var opts = $.extend({}, $.fn.cycle.defaults, options || {}, $.metadata ? $cont.metadata() : $.meta ? $cont.data() : {}); 47 if (opts.autostop) 48 opts.countdown = opts.autostopCount || els.length; 49 50 opts.before = opts.before ? [opts.before] : []; 51 opts.after = opts.after ? [opts.after] : []; 52 opts.after.unshift(function(){ opts.busy=0; }); 53 54 // clearType corrections 55 if (ie6 && opts.cleartype && !opts.cleartypeNoBg) 56 clearTypeFix($slides); 57 58 // allow shorthand overrides of width, height and timeout 59 var cls = this.className; 60 var w = parseInt((cls.match(/w:(\d+)/)||[])[1]) || opts.width; 61 var h = parseInt((cls.match(/h:(\d+)/)||[])[1]) || opts.height; 62 opts.timeout = parseInt((cls.match(/t:(\d+)/)||[])[1]) || opts.timeout; 63 64 if ($cont.css('position') == 'static') 65 $cont.css('position', 'relative'); 66 if (w) 67 $cont.width(w); 68 if (h && h != 'auto') 69 $cont.height(h); 70 71 if (opts.random) { 72 opts.randomMap = []; 73 for (var i = 0; i < els.length; i++) 74 opts.randomMap.push(i); 75 opts.randomMap.sort(function(a,b) {return Math.random() - 0.5;}); 76 opts.randomIndex = 0; 77 opts.startingSlide = opts.randomMap[0]; 78 } 79 else if (opts.startingSlide >= els.length) 80 opts.startingSlide = 0; // catch bogus input 81 var first = opts.startingSlide || 0; 82 $slides.css('position','absolute').hide().each(function(i) { 83 var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; 84 $(this).css('z-index', z) 85 }); 86 87 $(els[first]).show(); 88 if (opts.fit && w) 89 $slides.width(w); 90 if (opts.fit && h && h != 'auto') 91 $slides.height(h); 92 if (opts.pause) 93 $cont.hover(function(){this.cyclePause=1;}, function(){this.cyclePause=0;}); 94 95 // run transition init fn 96 var init = $.fn.cycle.transitions[opts.fx]; 97 if ($.isFunction(init)) 98 init($cont, $slides, opts); 99 100 $slides.each(function() { 101 var $el = $(this); 102 this.cycleH = (opts.fit && h) ? h : $el.height(); 103 this.cycleW = (opts.fit && w) ? w : $el.width(); 104 }); 105 106 opts.cssBefore = opts.cssBefore || {}; 107 opts.animIn = opts.animIn || {}; 108 opts.animOut = opts.animOut || {}; 109 110 $slides.not(':eq('+first+')').css(opts.cssBefore); 111 if (opts.cssFirst) 112 $($slides[first]).css(opts.cssFirst); 113 114 if (opts.timeout) { 115 // ensure that timeout and speed settings are sane 116 if (opts.speed.constructor == String) 117 opts.speed = {slow: 600, fast: 200}[opts.speed] || 400; 118 if (!opts.sync) 119 opts.speed = opts.speed / 2; 120 while((opts.timeout - opts.speed) < 250) 121 opts.timeout += opts.speed; 122 } 123 if (opts.easing) 124 opts.easeIn = opts.easeOut = opts.easing; 125 if (!opts.speedIn) 126 opts.speedIn = opts.speed; 127 if (!opts.speedOut) 128 opts.speedOut = opts.speed; 129 130 opts.slideCount = els.length; 131 opts.currSlide = first; 132 if (opts.random) { 133 opts.nextSlide = opts.currSlide; 134 if (++opts.randomIndex == els.length) 135 opts.randomIndex = 0; 136 opts.nextSlide = opts.randomMap[opts.randomIndex]; 137 } 138 else 139 opts.nextSlide = opts.startingSlide >= (els.length-1) ? 0 : opts.startingSlide+1; 140 141 // fire artificial events 142 var e0 = $slides[first]; 143 if (opts.before.length) 144 opts.before[0].apply(e0, [e0, e0, opts, true]); 145 if (opts.after.length > 1) 146 opts.after[1].apply(e0, [e0, e0, opts, true]); 147 148 if (opts.click && !opts.next) 149 opts.next = opts.click; 150 if (opts.next) 151 $(opts.next).bind('click', function(){return advance(els,opts,opts.rev?-1:1)}); 152 if (opts.prev) 153 $(opts.prev).bind('click', function(){return advance(els,opts,opts.rev?1:-1)}); 154 if (opts.pager) 155 buildPager(els,opts); 156 if (opts.timeout) 157 this.cycleTimeout = setTimeout(function(){go(els,opts,0,!opts.rev)}, opts.timeout + (opts.delay||0)); 158 }); 159 }; 160 161 function go(els, opts, manual, fwd) { 162 if (opts.busy) return; 163 var p = els[0].parentNode, curr = els[opts.currSlide], next = els[opts.nextSlide]; 164 if (p.cycleTimeout === 0 && !manual) 165 return; 166 167 if (!manual && !p.cyclePause && 168 ((opts.autostop && (--opts.countdown <= 0)) || 169 (opts.nowrap && !opts.random && opts.nextSlide < opts.currSlide))) 170 return; 171 172 if (manual || !p.cyclePause) { 173 if (opts.before.length) 174 $.each(opts.before, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); 175 var after = function() { 176 if ($.browser.msie && opts.cleartype) 177 this.style.removeAttribute('filter'); 178 $.each(opts.after, function(i,o) { o.apply(next, [curr, next, opts, fwd]); }); 179 }; 180 181 if (opts.nextSlide != opts.currSlide) { 182 opts.busy = 1; 183 if (opts.fxFn) 184 opts.fxFn(curr, next, opts, after, fwd); 185 else if ($.isFunction($.fn.cycle[opts.fx])) 186 $.fn.cycle[opts.fx](curr, next, opts, after); 187 else 188 $.fn.cycle.custom(curr, next, opts, after); 189 } 190 if (opts.random) { 191 opts.currSlide = opts.nextSlide; 192 if (++opts.randomIndex == els.length) 193 opts.randomIndex = 0; 194 opts.nextSlide = opts.randomMap[opts.randomIndex]; 195 } 196 else { // sequence 197 var roll = (opts.nextSlide + 1) == els.length; 198 opts.nextSlide = roll ? 0 : opts.nextSlide+1; 199 opts.currSlide = roll ? els.length-1 : opts.nextSlide-1; 200 } 201 if (opts.pager) 202 $(opts.pager).find('a').removeClass('activeSlide').filter('a:eq('+opts.currSlide+')').addClass('activeSlide'); 203 } 204 if (opts.timeout) 205 p.cycleTimeout = setTimeout(function() { go(els,opts,0,!opts.rev) }, opts.timeout); 206 }; 207 208 // advance slide forward or back 209 function advance(els, opts, val) { 210 var p = els[0].parentNode, timeout = p.cycleTimeout; 211 if (timeout) { 212 clearTimeout(timeout); 213 p.cycleTimeout = 0; 214 } 215 opts.nextSlide = opts.currSlide + val; 216 if (opts.nextSlide < 0) { 217 if (opts.nowrap) return false; 218 opts.nextSlide = els.length - 1; 219 } 220 else if (opts.nextSlide >= els.length) { 221 if (opts.nowrap) return false; 222 opts.nextSlide = 0; 223 } 224 if (opts.prevNextClick && typeof opts.prevNextClick == 'function') 225 opts.prevNextClick(val > 0, opts.nextSlide, els[opts.nextSlide]); 226 go(els, opts, 1, val>=0); 227 return false; 228 }; 229 230 function buildPager(els, opts) { 231 var $p = $(opts.pager); 232 $.each(els, function(i,o) { 233 var $a = (typeof opts.pagerAnchorBuilder == 'function') 234 ? $(opts.pagerAnchorBuilder(i,o)) 235 : $(''+(i+1)+''); 236 // don't reparent if anchor is in the dom 237 if ($a.parents('body').length == 0) 238 $a.appendTo($p); 239 $a.bind('click',function() { 240 opts.nextSlide = i; 241 var p = els[0].parentNode, timeout = p.cycleTimeout; 242 if (timeout) { 243 clearTimeout(timeout); 244 p.cycleTimeout = 0; 245 } 246 if (typeof opts.pagerClick == 'function') 247 opts.pagerClick(opts.nextSlide, els[opts.nextSlide]); 248 go(els,opts,1,!opts.rev); 249 return false; 250 }); 251 }); 252 $p.find('a').filter('a:eq('+opts.startingSlide+')').addClass('activeSlide'); 253 }; 254 255 // this fixes clearType problems in ie6 by setting an explicit bg color 256 function clearTypeFix($slides) { 257 function hex(s) { 258 var s = parseInt(s).toString(16); 259 return s.length < 2 ? '0'+s : s; 260 }; 261 function getBg(e) { 262 for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) { 263 var v = $.css(e,'background-color'); 264 if (v.indexOf('rgb') >= 0 ) { 265 var rgb = v.match(/\d+/g); 266 return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); 267 } 268 if (v && v != 'transparent') 269 return v; 270 } 271 return '#ffffff'; 272 }; 273 $slides.each(function() { $(this).css('background-color', getBg(this)); }); 274 }; 275 276 277 $.fn.cycle.custom = function(curr, next, opts, cb) { 278 var $l = $(curr), $n = $(next); 279 $n.css(opts.cssBefore); 280 var fn = function() {$n.animate(opts.animIn, opts.speedIn, opts.easeIn, cb)}; 281 $l.animate(opts.animOut, opts.speedOut, opts.easeOut, function() { 282 if (opts.cssAfter) $l.css(opts.cssAfter); 283 if (!opts.sync) fn(); 284 }); 285 if (opts.sync) fn(); 286 }; 287 288 $.fn.cycle.transitions = { 289 fade: function($cont, $slides, opts) { 290 $slides.not(':eq('+opts.startingSlide+')').css('opacity',0); 291 opts.before.push(function() { $(this).show() }); 292 opts.animIn = { opacity: 1 }; 293 opts.animOut = { opacity: 0 }; 294 opts.cssAfter = { display: 'none' }; 295 } 296 }; 297 298 $.fn.cycle.ver = function() { return ver; }; 299 300 // override these globally if you like (they are all optional) 301 $.fn.cycle.defaults = { 302 fx: 'fade', // one of: fade, shuffle, zoom, slideX, slideY, scrollUp/Down/Left/Right 303 timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance) 304 speed: 1000, // speed of the transition (any valid fx speed value) 305 speedIn: null, // speed of the 'in' transition 306 speedOut: null, // speed of the 'out' transition 307 click: null, // @deprecated; please use the 'next' option 308 next: null, // id of element to use as click trigger for next slide 309 prev: null, // id of element to use as click trigger for previous slide 310 prevNextClick: null, // callback fn for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement) 311 pager: null, // id of element to use as pager container 312 pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement) 313 pagerAnchorBuilder: null, // callback fn for building anchor links 314 before: null, // transition callback (scope set to element to be shown) 315 after: null, // transition callback (scope set to element that was shown) 316 easing: null, // easing method for both in and out transitions 317 easeIn: null, // easing for "in" transition 318 easeOut: null, // easing for "out" transition 319 shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 } 320 animIn: null, // properties that define how the slide animates in 321 animOut: null, // properties that define how the slide animates out 322 cssBefore: null, // properties that define the initial state of the slide before transitioning in 323 cssAfter: null, // properties that defined the state of the slide after transitioning out 324 fxFn: null, // function used to control the transition 325 height: 'auto', // container height 326 startingSlide: 0, // zero-based index of the first slide to be displayed 327 sync: 1, // true if in/out transitions should occur simultaneously 328 random: 0, // true for random, false for sequence (not applicable to shuffle fx) 329 fit: 0, // force slides to fit container 330 pause: 0, // true to enable "pause on hover" 331 autostop: 0, // true to end slideshow after X transitions (where X == slide count) 332 delay: 0, // additional delay (in ms) for first transition (hint: can be negative) 333 slideExpr: null, // expression for selecting slides (if something other than all children is required) 334 cleartype: 0, // true if clearType corrections should be applied (for IE) 335 nowrap: 0 // true to prevent slideshow from wrapping 336 }; 337 338 })(jQuery); 339 340 /* 341 * jQuery Cycle Plugin Transition Definitions 342 * This script is a plugin for the jQuery Cycle Plugin 343 * Examples and documentation at: http://malsup.com/jquery/cycle/ 344 * Copyright (c) 2007 M. Alsup 345 * Version: 2.07 346 * Dual licensed under the MIT and GPL licenses: 347 * http://www.opensource.org/licenses/mit-license.php 348 * http://www.gnu.org/licenses/gpl.html 349 */ 350 351 // 352 // These functions define one-time slide initialization for the named 353 // transitions. To save file size feel free to remove any of these that you 354 // don't need. 355 // 356 357 // scrollUp/Down/Left/Right 358 jQuery.fn.cycle.transitions.scrollUp = function($cont, $slides, opts) { 359 $cont.css('overflow','hidden'); 360 opts.before.push(function(curr, next, opts) { 361 jQuery(this).show(); 362 opts.cssBefore.top = next.offsetHeight; 363 opts.animOut.top = 0-curr.offsetHeight; 364 }); 365 opts.cssFirst = { top: 0 }; 366 opts.animIn = { top: 0 }; 367 opts.cssAfter = { display: 'none' }; 368 }; 369 jQuery.fn.cycle.transitions.scrollDown = function($cont, $slides, opts) { 370 $cont.css('overflow','hidden'); 371 opts.before.push(function(curr, next, opts) { 372 jQuery(this).show(); 373 opts.cssBefore.top = 0-next.offsetHeight; 374 opts.animOut.top = curr.offsetHeight; 375 }); 376 opts.cssFirst = { top: 0 }; 377 opts.animIn = { top: 0 }; 378 opts.cssAfter = { display: 'none' }; 379 }; 380 jQuery.fn.cycle.transitions.scrollLeft = function($cont, $slides, opts) { 381 $cont.css('overflow','hidden'); 382 opts.before.push(function(curr, next, opts) { 383 jQuery(this).show(); 384 opts.cssBefore.left = next.offsetWidth; 385 opts.animOut.left = 0-curr.offsetWidth; 386 }); 387 opts.cssFirst = { left: 0 }; 388 opts.animIn = { left: 0 }; 389 }; 390 jQuery.fn.cycle.transitions.scrollRight = function($cont, $slides, opts) { 391 $cont.css('overflow','hidden'); 392 opts.before.push(function(curr, next, opts) { 393 jQuery(this).show(); 394 opts.cssBefore.left = 0-next.offsetWidth; 395 opts.animOut.left = curr.offsetWidth; 396 }); 397 opts.cssFirst = { left: 0 }; 398 opts.animIn = { left: 0 }; 399 }; 400 jQuery.fn.cycle.transitions.scrollHorz = function($cont, $slides, opts) { 401 $cont.css('overflow','hidden').width(); 402 // $slides.show(); 403 opts.before.push(function(curr, next, opts, fwd) { 404 jQuery(this).show(); 405 var currW = curr.offsetWidth, nextW = next.offsetWidth; 406 opts.cssBefore = fwd ? { left: nextW } : { left: -nextW }; 407 opts.animIn.left = 0; 408 opts.animOut.left = fwd ? -currW : currW; 409 $slides.not(curr).css(opts.cssBefore); 410 }); 411 opts.cssFirst = { left: 0 }; 412 opts.cssAfter = { display: 'none' } 413 }; 414 jQuery.fn.cycle.transitions.scrollVert = function($cont, $slides, opts) { 415 $cont.css('overflow','hidden'); 416 // $slides.show(); 417 opts.before.push(function(curr, next, opts, fwd) { 418 jQuery(this).show(); 419 var currH = curr.offsetHeight, nextH = next.offsetHeight; 420 opts.cssBefore = fwd ? { top: -nextH } : { top: nextH }; 421 opts.animIn.top = 0; 422 opts.animOut.top = fwd ? currH : -currH; 423 $slides.not(curr).css(opts.cssBefore); 424 }); 425 opts.cssFirst = { top: 0 }; 426 opts.cssAfter = { display: 'none' } 427 }; 428 429 // slideX/slideY 430 jQuery.fn.cycle.transitions.slideX = function($cont, $slides, opts) { 431 opts.animIn = { width: 'show' }; 432 opts.animOut = { width: 'hide' }; 433 }; 434 jQuery.fn.cycle.transitions.slideY = function($cont, $slides, opts) { 435 opts.animIn = { height: 'show' }; 436 opts.animOut = { height: 'hide' }; 437 }; 438 439 // shuffle 440 jQuery.fn.cycle.transitions.shuffle = function($cont, $slides, opts) { 441 var w = $cont.css('overflow', 'visible').width(); 442 $slides.css({left: 0, top: 0}); 443 opts.before.push(function() { jQuery(this).show() }); 444 opts.speed = opts.speed / 2; // shuffle has 2 transitions 445 opts.random = 0; 446 opts.shuffle = opts.shuffle || {left:-w, top:15}; 447 opts.els = []; 448 for (var i=0; i < $slides.length; i++) 449 opts.els.push($slides[i]); 450 451 for (var i=0; i < opts.startingSlide; i++) 452 opts.els.push(opts.els.shift()); 453 454 // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!) 455 opts.fxFn = function(curr, next, opts, cb, fwd) { 456 var $el = fwd ? jQuery(curr) : jQuery(next); 457 $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() { 458 fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop()); 459 if (fwd) 460 for (var i=0, len=opts.els.length; i < len; i++) 461 jQuery(opts.els[i]).css('z-index', len-i); 462 else { 463 var z = jQuery(curr).css('z-index'); 464 $el.css('z-index', parseInt(z)+1); 465 } 466 $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() { 467 jQuery(fwd ? this : curr).hide(); 468 if (cb) cb(); 469 }); 470 }); 471 }; 472 }; 473 474 // turnUp/Down/Left/Right 475 jQuery.fn.cycle.transitions.turnUp = function($cont, $slides, opts) { 476 opts.before.push(function(curr, next, opts) { 477 jQuery(this).show(); 478 opts.cssBefore.top = next.cycleH; 479 opts.animIn.height = next.cycleH; 480 }); 481 opts.cssFirst = { top: 0 }; 482 opts.cssBefore = { height: 0 }; 483 opts.animIn = { top: 0 }; 484 opts.animOut = { height: 0 }; 485 opts.cssAfter = { display: 'none' }; 486 }; 487 jQuery.fn.cycle.transitions.turnDown = function($cont, $slides, opts) { 488 opts.before.push(function(curr, next, opts) { 489 jQuery(this).show(); 490 opts.animIn.height = next.cycleH; 491 opts.animOut.top = curr.cycleH; 492 }); 493 opts.cssFirst = { top: 0 }; 494 opts.cssBefore = { top: 0, height: 0 }; 495 opts.animOut = { height: 0 }; 496 opts.cssAfter = { display: 'none' }; 497 }; 498 jQuery.fn.cycle.transitions.turnLeft = function($cont, $slides, opts) { 499 opts.before.push(function(curr, next, opts) { 500 jQuery(this).show(); 501 opts.cssBefore.left = next.cycleW; 502 opts.animIn.width = next.cycleW; 503 }); 504 opts.cssBefore = { width: 0 }; 505 opts.animIn = { left: 0 }; 506 opts.animOut = { width: 0 }; 507 opts.cssAfter = { display: 'none' }; 508 }; 509 jQuery.fn.cycle.transitions.turnRight = function($cont, $slides, opts) { 510 opts.before.push(function(curr, next, opts) { 511 jQuery(this).show(); 512 opts.animIn.width = next.cycleW; 513 opts.animOut.left = curr.cycleW; 514 }); 515 opts.cssBefore = { left: 0, width: 0 }; 516 opts.animIn = { left: 0 }; 517 opts.animOut = { width: 0 }; 518 opts.cssAfter = { display: 'none' }; 519 }; 520 521 // zoom 522 jQuery.fn.cycle.transitions.zoom = function($cont, $slides, opts) { 523 opts.cssFirst = { top:0, left: 0 }; 524 opts.cssAfter = { display: 'none' }; 525 526 opts.before.push(function(curr, next, opts) { 527 jQuery(this).show(); 528 opts.cssBefore = { width: 0, height: 0, top: next.cycleH/2, left: next.cycleW/2 }; 529 opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH }; 530 opts.animOut = { width: 0, height: 0, top: curr.cycleH/2, left: curr.cycleW/2 }; 531 }); 532 }; 533 534 // fadeZoom 535 jQuery.fn.cycle.transitions.fadeZoom = function($cont, $slides, opts) { 536 opts.before.push(function(curr, next, opts) { 537 opts.cssBefore = { width: 0, height: 0, opacity: 1, left: next.cycleW/2, top: next.cycleH/2, zIndex: 1 }; 538 opts.animIn = { top: 0, left: 0, width: next.cycleW, height: next.cycleH }; 539 }); 540 opts.animOut = { opacity: 0 }; 541 opts.cssAfter = { zIndex: 0 }; 542 };