2 * jQuery Cycle Plugin (with Transition Definitions)
3 * Examples and documentation at: http://jquery.malsup.com/cycle/
4 * Copyright (c) 2007-2010 M. Alsup
5 * Version: 2.9999 (13-NOV-2011)
6 * Dual licensed under the MIT and GPL licenses.
7 * http://jquery.malsup.com/license.html
8 * Requires: jQuery v1.3.2 or later
10 ;(function($, undefined) {
14 // if $.support is not defined (pre jQuery 1.3) add what I need
15 if ($.support
== undefined) {
17 opacity
: !($.browser
.msie
)
22 $.fn
.cycle
.debug
&& log(s
);
25 window
.console
&& console
.log
&& console
.log('[cycle] ' + Array
.prototype.join
.call(arguments
,' '));
27 $.expr
[':'].paused = function(el
) {
32 // the options arg can be...
33 // a number - indicates an immediate transition should occur to the given slide index
34 // a string - 'pause', 'resume', 'toggle', 'next', 'prev', 'stop', 'destroy' or the name of a transition effect (ie, 'fade', 'zoom', etc)
35 // an object - properties to control the slideshow
37 // the arg2 arg can be...
38 // the name of an fx (only used in conjunction with a numeric value for 'options')
39 // the value true (only used in first arg == 'resume') and indicates
40 // that the resume should occur immediately (not wait for next timeout)
42 $.fn
.cycle = function(options
, arg2
) {
43 var o
= { s
: this.selector
, c
: this.context
};
45 // in 1.3+ we can fix mistakes with the ready state
46 if (this.length
=== 0 && options
!= 'stop') {
47 if (!$.isReady
&& o
.s
) {
48 log('DOM not ready, queuing slideshow');
50 $(o
.s
,o
.c
).cycle(options
,arg2
);
54 // is your DOM ready? http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
55 log('terminating; zero elements found by selector' + ($.isReady
? '' : ' (DOM not ready)'));
59 // iterate the matched nodeset
60 return this.each(function() {
61 var opts
= handleArguments(this, options
, arg2
);
65 opts
.updateActivePagerLink
= opts
.updateActivePagerLink
|| $.fn
.cycle
.updateActivePagerLink
;
67 // stop existing slideshow for this container (if there is one)
68 if (this.cycleTimeout
)
69 clearTimeout(this.cycleTimeout
);
70 this.cycleTimeout
= this.cyclePause
= 0;
73 var $slides
= opts
.slideExpr
? $(opts
.slideExpr
, this) : $cont
.children();
74 var els
= $slides
.get();
76 var opts2
= buildOptions($cont
, $slides
, els
, opts
, o
);
81 log('terminating; too few slides: ' + els
.length
);
85 var startTime
= opts2
.continuous
? 10 : getTimeout(els
[opts2
.currSlide
], els
[opts2
.nextSlide
], opts2
, !opts2
.backwards
);
87 // if it's an auto slideshow, kick it off
89 startTime
+= (opts2
.delay
|| 0);
92 debug('first timeout: ' + startTime
);
93 this.cycleTimeout
= setTimeout(function(){go(els
,opts2
,0,!opts
.backwards
)}, startTime
);
98 function triggerPause(cont
, byHover
, onPager
) {
99 var opts
= $(cont
).data('cycle.opts');
100 var paused
= !!cont
.cyclePause
;
101 if (paused
&& opts
.paused
)
102 opts
.paused(cont
, opts
, byHover
, onPager
);
103 else if (!paused
&& opts
.resumed
)
104 opts
.resumed(cont
, opts
, byHover
, onPager
);
107 // process the args that were passed to the plugin fn
108 function handleArguments(cont
, options
, arg2
) {
109 if (cont
.cycleStop
== undefined)
111 if (options
=== undefined || options
=== null)
113 if (options
.constructor == String
) {
117 var opts
= $(cont
).data('cycle.opts');
120 cont
.cycleStop
++; // callbacks look for change
121 if (cont
.cycleTimeout
)
122 clearTimeout(cont
.cycleTimeout
);
123 cont
.cycleTimeout
= 0;
124 opts
.elements
&& $(opts
.elements
).stop();
125 $(cont
).removeData('cycle.opts');
126 if (options
== 'destroy')
130 cont
.cyclePause
= (cont
.cyclePause
=== 1) ? 0 : 1;
131 checkInstantResume(cont
.cyclePause
, arg2
, cont
);
140 checkInstantResume(false, arg2
, cont
);
145 var opts
= $(cont
).data('cycle.opts');
147 log('options not found, "prev/next" ignored');
150 $.fn
.cycle
[options
](opts
);
153 options
= { fx
: options
};
157 else if (options
.constructor == Number
) {
158 // go to the requested slide
160 options
= $(cont
).data('cycle.opts');
162 log('options not found, can not advance slide');
165 if (num
< 0 || num
>= options
.elements
.length
) {
166 log('invalid slide index: ' + num
);
169 options
.nextSlide
= num
;
170 if (cont
.cycleTimeout
) {
171 clearTimeout(cont
.cycleTimeout
);
172 cont
.cycleTimeout
= 0;
174 if (typeof arg2
== 'string')
175 options
.oneTimeFx
= arg2
;
176 go(options
.elements
, options
, 1, num
>= options
.currSlide
);
181 function checkInstantResume(isPaused
, arg2
, cont
) {
182 if (!isPaused
&& arg2
=== true) { // resume now!
183 var options
= $(cont
).data('cycle.opts');
185 log('options not found, can not resume');
188 if (cont
.cycleTimeout
) {
189 clearTimeout(cont
.cycleTimeout
);
190 cont
.cycleTimeout
= 0;
192 go(options
.elements
, options
, 1, !options
.backwards
);
197 function removeFilter(el
, opts
) {
198 if (!$.support
.opacity
&& opts
.cleartype
&& el
.style
.filter
) {
199 try { el
.style
.removeAttribute('filter'); }
200 catch(smother
) {} // handle old opera versions
204 // unbind event handlers
205 function destroy(opts
) {
207 $(opts
.next
).unbind(opts
.prevNextEvent
);
209 $(opts
.prev
).unbind(opts
.prevNextEvent
);
211 if (opts
.pager
|| opts
.pagerAnchorBuilder
)
212 $.each(opts
.pagerAnchors
|| [], function() {
213 this.unbind().remove();
215 opts
.pagerAnchors
= null;
216 if (opts
.destroy
) // callback
220 // one-time initialization
221 function buildOptions($cont
, $slides
, els
, options
, o
) {
222 var startingSlideSpecified
;
223 // support metadata plugin (v1.0 and v2.0)
224 var opts
= $.extend({}, $.fn
.cycle
.defaults
, options
|| {}, $.metadata
? $cont
.metadata() : $.meta
? $cont
.data() : {});
225 var meta
= $.isFunction($cont
.data
) ? $cont
.data(opts
.metaAttr
) : null;
227 opts
= $.extend(opts
, meta
);
229 opts
.countdown
= opts
.autostopCount
|| els
.length
;
232 $cont
.data('cycle.opts', opts
);
234 opts
.stopCount
= cont
.cycleStop
;
236 opts
.before
= opts
.before
? [opts
.before
] : [];
237 opts
.after
= opts
.after
? [opts
.after
] : [];
239 // push some after callbacks
240 if (!$.support
.opacity
&& opts
.cleartype
)
241 opts
.after
.push(function() { removeFilter(this, opts
); });
243 opts
.after
.push(function() { go(els
,opts
,0,!opts
.backwards
); });
245 saveOriginalOpts(opts
);
247 // clearType corrections
248 if (!$.support
.opacity
&& opts
.cleartype
&& !opts
.cleartypeNoBg
)
249 clearTypeFix($slides
);
251 // container requires non-static position so that slides can be position within
252 if ($cont
.css('position') == 'static')
253 $cont
.css('position', 'relative');
255 $cont
.width(opts
.width
);
256 if (opts
.height
&& opts
.height
!= 'auto')
257 $cont
.height(opts
.height
);
259 if (opts
.startingSlide
!= undefined) {
260 opts
.startingSlide
= parseInt(opts
.startingSlide
,10);
261 if (opts
.startingSlide
>= els
.length
|| opts
.startSlide
< 0)
262 opts
.startingSlide
= 0; // catch bogus input
264 startingSlideSpecified
= true;
266 else if (opts
.backwards
)
267 opts
.startingSlide
= els
.length
- 1;
269 opts
.startingSlide
= 0;
271 // if random, mix up the slide array
274 for (var i
= 0; i
< els
.length
; i
++)
275 opts
.randomMap
.push(i
);
276 opts
.randomMap
.sort(function(a
,b
) {return Math
.random() - 0.5;});
277 if (startingSlideSpecified
) {
278 // try to find the specified starting slide and if found set start slide index in the map accordingly
279 for ( var cnt
= 0; cnt
< els
.length
; cnt
++ ) {
280 if ( opts
.startingSlide
== opts
.randomMap
[cnt
] ) {
281 opts
.randomIndex
= cnt
;
286 opts
.randomIndex
= 1;
287 opts
.startingSlide
= opts
.randomMap
[1];
290 else if (opts
.startingSlide
>= els
.length
)
291 opts
.startingSlide
= 0; // catch bogus input
292 opts
.currSlide
= opts
.startingSlide
|| 0;
293 var first
= opts
.startingSlide
;
295 // set position and zIndex on all the slides
296 $slides
.css({position
: 'absolute', top
:0, left
:0}).hide().each(function(i
) {
299 z
= first
? i
<= first
? els
.length
+ (i
-first
) : first
-i
: els
.length
-i
;
301 z
= first
? i
>= first
? els
.length
- (i
-first
) : first
-i
: els
.length
-i
;
302 $(this).css('z-index', z
)
305 // make sure first slide is visible
306 $(els
[first
]).css('opacity',1).show(); // opacity bit needed to handle restart use case
307 removeFilter(els
[first
], opts
);
313 $slides
.width(opts
.width
);
314 if (opts
.height
&& opts
.height
!= 'auto')
315 $slides
.height(opts
.height
);
317 $slides
.each(function(){
318 var $slide
= $(this);
319 var ratio
= (opts
.aspect
=== true) ? $slide
.width()/$slide
.height() : opts
.aspect
;
320 if( opts
.width
&& $slide
.width() != opts
.width
) {
321 $slide
.width( opts
.width
);
322 $slide
.height( opts
.width
/ ratio
);
325 if( opts
.height
&& $slide
.height() < opts
.height
) {
326 $slide
.height( opts
.height
);
327 $slide
.width( opts
.height
* ratio
);
333 if (opts
.center
&& ((!opts
.fit
) || opts
.aspect
)) {
334 $slides
.each(function(){
335 var $slide
= $(this);
337 "margin-left": opts
.width
?
338 ((opts
.width
- $slide
.width()) / 2) + "px" :
340 "margin-top": opts
.height
?
341 ((opts
.height
- $slide
.height()) / 2) + "px" :
347 if (opts
.center
&& !opts
.fit
&& !opts
.slideResize
) {
348 $slides
.each(function(){
349 var $slide
= $(this);
351 "margin-left": opts
.width
? ((opts
.width
- $slide
.width()) / 2) + "px" : 0,
352 "margin-top": opts
.height
? ((opts
.height
- $slide
.height()) / 2) + "px" : 0
358 var reshape
= opts
.containerResize
&& !$cont
.innerHeight();
359 if (reshape
) { // do this only if container has no size http://tinyurl.com/da2oa9
360 var maxw
= 0, maxh
= 0;
361 for(var j
=0; j
< els
.length
; j
++) {
362 var $e
= $(els
[j
]), e
= $e
[0], w
= $e
.outerWidth(), h
= $e
.outerHeight();
363 if (!w
) w
= e
.offsetWidth
|| e
.width
|| $e
.attr('width');
364 if (!h
) h
= e
.offsetHeight
|| e
.height
|| $e
.attr('height');
365 maxw
= w
> maxw
? w
: maxw
;
366 maxh
= h
> maxh
? h
: maxh
;
368 if (maxw
> 0 && maxh
> 0)
369 $cont
.css({width
:maxw
+'px',height
:maxh
+'px'});
372 var pauseFlag
= false; // https://github.com/malsup/cycle/issues/44
378 triggerPause(cont
, true);
381 pauseFlag
&& this.cyclePause
--;
382 triggerPause(cont
, true);
386 if (supportMultiTransitions(opts
) === false)
389 // apparently a lot of people use image slideshows without height/width attributes on the images.
390 // Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
392 options
.requeueAttempts
= options
.requeueAttempts
|| 0;
393 $slides
.each(function() {
394 // try to get height/width of each slide
396 this.cycleH
= (opts
.fit
&& opts
.height
) ? opts
.height
: ($el
.height() || this.offsetHeight
|| this.height
|| $el
.attr('height') || 0);
397 this.cycleW
= (opts
.fit
&& opts
.width
) ? opts
.width
: ($el
.width() || this.offsetWidth
|| this.width
|| $el
.attr('width') || 0);
399 if ( $el
.is('img') ) {
400 // sigh.. sniffing, hacking, shrugging... this crappy hack tries to account for what browsers do when
401 // an image is being downloaded and the markup did not include sizing info (height/width attributes);
402 // there seems to be some "default" sizes used in this situation
403 var loadingIE
= ($.browser
.msie
&& this.cycleW
== 28 && this.cycleH
== 30 && !this.complete
);
404 var loadingFF
= ($.browser
.mozilla
&& this.cycleW
== 34 && this.cycleH
== 19 && !this.complete
);
405 var loadingOp
= ($.browser
.opera
&& ((this.cycleW
== 42 && this.cycleH
== 19) || (this.cycleW
== 37 && this.cycleH
== 17)) && !this.complete
);
406 var loadingOther
= (this.cycleH
== 0 && this.cycleW
== 0 && !this.complete
);
407 // don't requeue for images that are still loading but have a valid size
408 if (loadingIE
|| loadingFF
|| loadingOp
|| loadingOther
) {
409 if (o
.s
&& opts
.requeueOnImageNotLoaded
&& ++options
.requeueAttempts
< 100) { // track retry count so we don't loop forever
410 log(options
.requeueAttempts
,' - img slide not loaded, requeuing slideshow: ', this.src
, this.cycleW
, this.cycleH
);
411 setTimeout(function() {$(o
.s
,o
.c
).cycle(options
)}, opts
.requeueTimeout
);
413 return false; // break each loop
416 log('could not determine size of image: '+this.src
, this.cycleW
, this.cycleH
);
426 opts
.cssBefore
= opts
.cssBefore
|| {};
427 opts
.cssAfter
= opts
.cssAfter
|| {};
428 opts
.cssFirst
= opts
.cssFirst
|| {};
429 opts
.animIn
= opts
.animIn
|| {};
430 opts
.animOut
= opts
.animOut
|| {};
432 $slides
.not(':eq('+first
+')').css(opts
.cssBefore
);
433 $($slides
[first
]).css(opts
.cssFirst
);
436 opts
.timeout
= parseInt(opts
.timeout
,10);
437 // ensure that timeout and speed settings are sane
438 if (opts
.speed
.constructor == String
)
439 opts
.speed
= $.fx
.speeds
[opts
.speed
] || parseInt(opts
.speed
,10);
441 opts
.speed
= opts
.speed
/ 2;
443 var buffer
= opts
.fx
== 'none' ? 0 : opts
.fx
== 'shuffle' ? 500 : 250;
444 while((opts
.timeout
- opts
.speed
) < buffer
) // sanitize timeout
445 opts
.timeout
+= opts
.speed
;
448 opts
.easeIn
= opts
.easeOut
= opts
.easing
;
450 opts
.speedIn
= opts
.speed
;
452 opts
.speedOut
= opts
.speed
;
454 opts
.slideCount
= els
.length
;
455 opts
.currSlide
= opts
.lastSlide
= first
;
457 if (++opts
.randomIndex
== els
.length
)
458 opts
.randomIndex
= 0;
459 opts
.nextSlide
= opts
.randomMap
[opts
.randomIndex
];
461 else if (opts
.backwards
)
462 opts
.nextSlide
= opts
.startingSlide
== 0 ? (els
.length
-1) : opts
.startingSlide
-1;
464 opts
.nextSlide
= opts
.startingSlide
>= (els
.length
-1) ? 0 : opts
.startingSlide
+1;
466 // run transition init fn
468 var init
= $.fn
.cycle
.transitions
[opts
.fx
];
469 if ($.isFunction(init
))
470 init($cont
, $slides
, opts
);
471 else if (opts
.fx
!= 'custom' && !opts
.multiFx
) {
472 log('unknown transition: ' + opts
.fx
,'; slideshow terminating');
477 // fire artificial events
478 var e0
= $slides
[first
];
479 if (!opts
.skipInitializationCallbacks
) {
480 if (opts
.before
.length
)
481 opts
.before
[0].apply(e0
, [e0
, e0
, opts
, true]);
482 if (opts
.after
.length
)
483 opts
.after
[0].apply(e0
, [e0
, e0
, opts
, true]);
486 $(opts
.next
).bind(opts
.prevNextEvent
,function(){return advance(opts
,1)});
488 $(opts
.prev
).bind(opts
.prevNextEvent
,function(){return advance(opts
,0)});
489 if (opts
.pager
|| opts
.pagerAnchorBuilder
)
490 buildPager(els
,opts
);
492 exposeAddSlide(opts
, els
);
497 // save off original opts so we can restore after clearing state
498 function saveOriginalOpts(opts
) {
499 opts
.original
= { before
: [], after
: [] };
500 opts
.original
.cssBefore
= $.extend({}, opts
.cssBefore
);
501 opts
.original
.cssAfter
= $.extend({}, opts
.cssAfter
);
502 opts
.original
.animIn
= $.extend({}, opts
.animIn
);
503 opts
.original
.animOut
= $.extend({}, opts
.animOut
);
504 $.each(opts
.before
, function() { opts
.original
.before
.push(this); });
505 $.each(opts
.after
, function() { opts
.original
.after
.push(this); });
508 function supportMultiTransitions(opts
) {
509 var i
, tx
, txs
= $.fn
.cycle
.transitions
;
510 // look for multiple effects
511 if (opts
.fx
.indexOf(',') > 0) {
513 opts
.fxs
= opts
.fx
.replace(/\s*/g,'').split(',');
514 // discard any bogus effect names
515 for (i
=0; i
< opts
.fxs
.length
; i
++) {
516 var fx
= opts
.fxs
[i
];
518 if (!tx
|| !txs
.hasOwnProperty(fx
) || !$.isFunction(tx
)) {
519 log('discarding unknown transition: ',fx
);
520 opts
.fxs
.splice(i
,1);
524 // if we have an empty list then we threw everything away!
525 if (!opts
.fxs
.length
) {
526 log('No valid transitions named; slideshow terminating.');
530 else if (opts
.fx
== 'all') { // auto-gen the list of transitions
535 if (txs
.hasOwnProperty(p
) && $.isFunction(tx
))
539 if (opts
.multiFx
&& opts
.randomizeEffects
) {
540 // munge the fxs array to make effect selection random
541 var r1
= Math
.floor(Math
.random() * 20) + 30;
542 for (i
= 0; i
< r1
; i
++) {
543 var r2
= Math
.floor(Math
.random() * opts
.fxs
.length
);
544 opts
.fxs
.push(opts
.fxs
.splice(r2
,1)[0]);
546 debug('randomized fx sequence: ',opts
.fxs
);
551 // provide a mechanism for adding slides after the slideshow has started
552 function exposeAddSlide(opts
, els
) {
553 opts
.addSlide = function(newSlide
, prepend
) {
554 var $s
= $(newSlide
), s
= $s
[0];
555 if (!opts
.autostopCount
)
557 els
[prepend
?'unshift':'push'](s
);
559 opts
.els
[prepend
?'unshift':'push'](s
); // shuffle needs this
560 opts
.slideCount
= els
.length
;
562 // add the slide to the random map and resort
564 opts
.randomMap
.push(opts
.slideCount
-1);
565 opts
.randomMap
.sort(function(a
,b
) {return Math
.random() - 0.5;});
568 $s
.css('position','absolute');
569 $s
[prepend
?'prependTo':'appendTo'](opts
.$cont
);
576 if (!$.support
.opacity
&& opts
.cleartype
&& !opts
.cleartypeNoBg
)
579 if (opts
.fit
&& opts
.width
)
580 $s
.width(opts
.width
);
581 if (opts
.fit
&& opts
.height
&& opts
.height
!= 'auto')
582 $s
.height(opts
.height
);
583 s
.cycleH
= (opts
.fit
&& opts
.height
) ? opts
.height
: $s
.height();
584 s
.cycleW
= (opts
.fit
&& opts
.width
) ? opts
.width
: $s
.width();
586 $s
.css(opts
.cssBefore
);
588 if (opts
.pager
|| opts
.pagerAnchorBuilder
)
589 $.fn
.cycle
.createPagerAnchor(els
.length
-1, s
, $(opts
.pager
), els
, opts
);
591 if ($.isFunction(opts
.onAddSlide
))
594 $s
.hide(); // default behavior
598 // reset internal state; we do this on every pass in order to support multiple effects
599 $.fn
.cycle
.resetState = function(opts
, fx
) {
601 opts
.before
= []; opts
.after
= [];
602 opts
.cssBefore
= $.extend({}, opts
.original
.cssBefore
);
603 opts
.cssAfter
= $.extend({}, opts
.original
.cssAfter
);
604 opts
.animIn
= $.extend({}, opts
.original
.animIn
);
605 opts
.animOut
= $.extend({}, opts
.original
.animOut
);
607 $.each(opts
.original
.before
, function() { opts
.before
.push(this); });
608 $.each(opts
.original
.after
, function() { opts
.after
.push(this); });
611 var init
= $.fn
.cycle
.transitions
[fx
];
612 if ($.isFunction(init
))
613 init(opts
.$cont
, $(opts
.elements
), opts
);
616 // this is the main engine fn, it handles the timeouts, callbacks and slide index mgmt
617 function go(els
, opts
, manual
, fwd
) {
618 // opts.busy is true if we're in the middle of an animation
619 if (manual
&& opts
.busy
&& opts
.manualTrump
) {
620 // let manual transitions requests trump active ones
621 debug('manualTrump in go(), stopping active transition');
622 $(els
).stop(true,true);
625 // don't begin another timeout-based transition if there is one active
627 debug('transition active, ignoring new tx request');
631 var p
= opts
.$cont
[0], curr
= els
[opts
.currSlide
], next
= els
[opts
.nextSlide
];
633 // stop cycling if we have an outstanding stop request
634 if (p
.cycleStop
!= opts
.stopCount
|| p
.cycleTimeout
=== 0 && !manual
)
637 // check to see if we should stop cycling based on autostop options
638 if (!manual
&& !p
.cyclePause
&& !opts
.bounce
&&
639 ((opts
.autostop
&& (--opts
.countdown
<= 0)) ||
640 (opts
.nowrap
&& !opts
.random
&& opts
.nextSlide
< opts
.currSlide
))) {
646 // if slideshow is paused, only transition on a manual trigger
648 if ((manual
|| !p
.cyclePause
) && (opts
.nextSlide
!= opts
.currSlide
)) {
651 // keep trying to get the slide size if we don't have it yet
652 curr
.cycleH
= curr
.cycleH
|| $(curr
).height();
653 curr
.cycleW
= curr
.cycleW
|| $(curr
).width();
654 next
.cycleH
= next
.cycleH
|| $(next
).height();
655 next
.cycleW
= next
.cycleW
|| $(next
).width();
657 // support multiple transition types
659 if (fwd
&& (opts
.lastFx
== undefined || ++opts
.lastFx
>= opts
.fxs
.length
))
661 else if (!fwd
&& (opts
.lastFx
== undefined || --opts
.lastFx
< 0))
662 opts
.lastFx
= opts
.fxs
.length
- 1;
663 fx
= opts
.fxs
[opts
.lastFx
];
666 // one-time fx overrides apply to: $('div').cycle(3,'zoom');
667 if (opts
.oneTimeFx
) {
669 opts
.oneTimeFx
= null;
672 $.fn
.cycle
.resetState(opts
, fx
);
674 // run the before callbacks
675 if (opts
.before
.length
)
676 $.each(opts
.before
, function(i
,o
) {
677 if (p
.cycleStop
!= opts
.stopCount
) return;
678 o
.apply(next
, [curr
, next
, opts
, fwd
]);
681 // stage the after callacks
682 var after = function() {
684 $.each(opts
.after
, function(i
,o
) {
685 if (p
.cycleStop
!= opts
.stopCount
) return;
686 o
.apply(next
, [curr
, next
, opts
, fwd
]);
689 // queue next transition
694 debug('tx firing('+fx
+'); currSlide: ' + opts
.currSlide
+ '; nextSlide: ' + opts
.nextSlide
);
696 // get ready to perform the transition
698 if (opts
.fxFn
) // fx function provided?
699 opts
.fxFn(curr
, next
, opts
, after
, fwd
, manual
&& opts
.fastOnEvent
);
700 else if ($.isFunction($.fn
.cycle
[opts
.fx
])) // fx plugin ?
701 $.fn
.cycle
[opts
.fx
](curr
, next
, opts
, after
, fwd
, manual
&& opts
.fastOnEvent
);
703 $.fn
.cycle
.custom(curr
, next
, opts
, after
, fwd
, manual
&& opts
.fastOnEvent
);
709 if (changed
|| opts
.nextSlide
== opts
.currSlide
) {
710 // calculate the next slide
711 opts
.lastSlide
= opts
.currSlide
;
713 opts
.currSlide
= opts
.nextSlide
;
714 if (++opts
.randomIndex
== els
.length
) {
715 opts
.randomIndex
= 0;
716 opts
.randomMap
.sort(function(a
,b
) {return Math
.random() - 0.5;});
718 opts
.nextSlide
= opts
.randomMap
[opts
.randomIndex
];
719 if (opts
.nextSlide
== opts
.currSlide
)
720 opts
.nextSlide
= (opts
.currSlide
== opts
.slideCount
- 1) ? 0 : opts
.currSlide
+ 1;
722 else if (opts
.backwards
) {
723 var roll
= (opts
.nextSlide
- 1) < 0;
724 if (roll
&& opts
.bounce
) {
725 opts
.backwards
= !opts
.backwards
;
730 opts
.nextSlide
= roll
? (els
.length
-1) : opts
.nextSlide
-1;
731 opts
.currSlide
= roll
? 0 : opts
.nextSlide
+1;
735 var roll
= (opts
.nextSlide
+ 1) == els
.length
;
736 if (roll
&& opts
.bounce
) {
737 opts
.backwards
= !opts
.backwards
;
738 opts
.nextSlide
= els
.length
-2;
739 opts
.currSlide
= els
.length
-1;
742 opts
.nextSlide
= roll
? 0 : opts
.nextSlide
+1;
743 opts
.currSlide
= roll
? els
.length
-1 : opts
.nextSlide
-1;
747 if (changed
&& opts
.pager
)
748 opts
.updateActivePagerLink(opts
.pager
, opts
.currSlide
, opts
.activePagerClass
);
750 function queueNext() {
751 // stage the next transition
752 var ms
= 0, timeout
= opts
.timeout
;
753 if (opts
.timeout
&& !opts
.continuous
) {
754 ms
= getTimeout(els
[opts
.currSlide
], els
[opts
.nextSlide
], opts
, fwd
);
755 if (opts
.fx
== 'shuffle')
758 else if (opts
.continuous
&& p
.cyclePause
) // continuous shows work off an after callback, not this timer logic
761 p
.cycleTimeout
= setTimeout(function(){ go(els
, opts
, 0, !opts
.backwards
) }, ms
);
765 // invoked after transition
766 $.fn
.cycle
.updateActivePagerLink = function(pager
, currSlide
, clsName
) {
767 $(pager
).each(function() {
768 $(this).children().removeClass(clsName
).eq(currSlide
).addClass(clsName
);
772 // calculate timeout value for current transition
773 function getTimeout(curr
, next
, opts
, fwd
) {
774 if (opts
.timeoutFn
) {
775 // call user provided calc fn
776 var t
= opts
.timeoutFn
.call(curr
,curr
,next
,opts
,fwd
);
777 while (opts
.fx
!= 'none' && (t
- opts
.speed
) < 250) // sanitize timeout
779 debug('calculated timeout: ' + t
+ '; speed: ' + opts
.speed
);
786 // expose next/prev function, caller must pass in state
787 $.fn
.cycle
.next = function(opts
) { advance(opts
,1); };
788 $.fn
.cycle
.prev = function(opts
) { advance(opts
,0);};
790 // advance slide forward or back
791 function advance(opts
, moveForward
) {
792 var val
= moveForward
? 1 : -1;
793 var els
= opts
.elements
;
794 var p
= opts
.$cont
[0], timeout
= p
.cycleTimeout
;
796 clearTimeout(timeout
);
799 if (opts
.random
&& val
< 0) {
800 // move back to the previously display slide
802 if (--opts
.randomIndex
== -2)
803 opts
.randomIndex
= els
.length
-2;
804 else if (opts
.randomIndex
== -1)
805 opts
.randomIndex
= els
.length
-1;
806 opts
.nextSlide
= opts
.randomMap
[opts
.randomIndex
];
808 else if (opts
.random
) {
809 opts
.nextSlide
= opts
.randomMap
[opts
.randomIndex
];
812 opts
.nextSlide
= opts
.currSlide
+ val
;
813 if (opts
.nextSlide
< 0) {
814 if (opts
.nowrap
) return false;
815 opts
.nextSlide
= els
.length
- 1;
817 else if (opts
.nextSlide
>= els
.length
) {
818 if (opts
.nowrap
) return false;
823 var cb
= opts
.onPrevNextEvent
|| opts
.prevNextClick
; // prevNextClick is deprecated
824 if ($.isFunction(cb
))
825 cb(val
> 0, opts
.nextSlide
, els
[opts
.nextSlide
]);
826 go(els
, opts
, 1, moveForward
);
830 function buildPager(els
, opts
) {
831 var $p
= $(opts
.pager
);
832 $.each(els
, function(i
,o
) {
833 $.fn
.cycle
.createPagerAnchor(i
,o
,$p
,els
,opts
);
835 opts
.updateActivePagerLink(opts
.pager
, opts
.startingSlide
, opts
.activePagerClass
);
838 $.fn
.cycle
.createPagerAnchor = function(i
, el
, $p
, els
, opts
) {
840 if ($.isFunction(opts
.pagerAnchorBuilder
)) {
841 a
= opts
.pagerAnchorBuilder(i
,el
);
842 debug('pagerAnchorBuilder('+i
+', el) returned: ' + a
);
845 a
= '<a href="#">'+(i
+1)+'</a>';
850 // don't reparent if anchor is in the dom
851 if ($a
.parents('body').length
=== 0) {
855 var $clone
= $a
.clone(true);
856 $(this).append($clone
);
866 opts
.pagerAnchors
= opts
.pagerAnchors
|| [];
867 opts
.pagerAnchors
.push($a
);
869 var pagerFn = function(e
) {
872 var p
= opts
.$cont
[0], timeout
= p
.cycleTimeout
;
874 clearTimeout(timeout
);
877 var cb
= opts
.onPagerEvent
|| opts
.pagerClick
; // pagerClick is deprecated
878 if ($.isFunction(cb
))
879 cb(opts
.nextSlide
, els
[opts
.nextSlide
]);
880 go(els
,opts
,1,opts
.currSlide
< i
); // trigger the trans
881 // return false; // <== allow bubble
884 if ( /mouseenter|mouseover/i.test(opts
.pagerEvent
) ) {
885 $a
.hover(pagerFn
, function(){/* no-op */} );
888 $a
.bind(opts
.pagerEvent
, pagerFn
);
891 if ( ! /^click/.test(opts
.pagerEvent
) && !opts
.allowPagerClickBubble
)
892 $a
.bind('click.cycle', function(){return false;}); // suppress click
894 var cont
= opts
.$cont
[0];
895 var pauseFlag
= false; // https://github.com/malsup/cycle/issues/44
896 if (opts
.pauseOnPagerHover
) {
901 triggerPause(cont
,true,true);
903 pauseFlag
&& cont
.cyclePause
--;
904 triggerPause(cont
,true,true);
910 // helper fn to calculate the number of slides between the current and the next
911 $.fn
.cycle
.hopsFromLast = function(opts
, fwd
) {
912 var hops
, l
= opts
.lastSlide
, c
= opts
.currSlide
;
914 hops
= c
> l
? c
- l
: opts
.slideCount
- l
;
916 hops
= c
< l
? l
- c
: l
+ opts
.slideCount
- c
;
920 // fix clearType problems in ie6 by setting an explicit bg color
921 // (otherwise text slides look horrible during a fade transition)
922 function clearTypeFix($slides
) {
923 debug('applying clearType background-color hack');
925 s
= parseInt(s
,10).toString(16);
926 return s
.length
< 2 ? '0'+s
: s
;
929 for ( ; e
&& e
.nodeName
.toLowerCase() != 'html'; e
= e
.parentNode
) {
930 var v
= $.css(e
,'background-color');
931 if (v
&& v
.indexOf('rgb') >= 0 ) {
932 var rgb
= v
.match(/\d+/g);
933 return '#'+ hex(rgb
[0]) + hex(rgb
[1]) + hex(rgb
[2]);
935 if (v
&& v
!= 'transparent')
940 $slides
.each(function() { $(this).css('background-color', getBg(this)); });
943 // reset common props before the next transition
944 $.fn
.cycle
.commonReset = function(curr
,next
,opts
,w
,h
,rev
) {
945 $(opts
.elements
).not(curr
).hide();
946 if (typeof opts
.cssBefore
.opacity
== 'undefined')
947 opts
.cssBefore
.opacity
= 1;
948 opts
.cssBefore
.display
= 'block';
949 if (opts
.slideResize
&& w
!== false && next
.cycleW
> 0)
950 opts
.cssBefore
.width
= next
.cycleW
;
951 if (opts
.slideResize
&& h
!== false && next
.cycleH
> 0)
952 opts
.cssBefore
.height
= next
.cycleH
;
953 opts
.cssAfter
= opts
.cssAfter
|| {};
954 opts
.cssAfter
.display
= 'none';
955 $(curr
).css('zIndex',opts
.slideCount
+ (rev
=== true ? 1 : 0));
956 $(next
).css('zIndex',opts
.slideCount
+ (rev
=== true ? 0 : 1));
959 // the actual fn for effecting a transition
960 $.fn
.cycle
.custom = function(curr
, next
, opts
, cb
, fwd
, speedOverride
) {
961 var $l
= $(curr
), $n
= $(next
);
962 var speedIn
= opts
.speedIn
, speedOut
= opts
.speedOut
, easeIn
= opts
.easeIn
, easeOut
= opts
.easeOut
;
963 $n
.css(opts
.cssBefore
);
965 if (typeof speedOverride
== 'number')
966 speedIn
= speedOut
= speedOverride
;
968 speedIn
= speedOut
= 1;
969 easeIn
= easeOut
= null;
971 var fn = function() {
972 $n
.animate(opts
.animIn
, speedIn
, easeIn
, function() {
976 $l
.animate(opts
.animOut
, speedOut
, easeOut
, function() {
977 $l
.css(opts
.cssAfter
);
984 // transition definitions - only fade is defined here, transition pack defines the rest
985 $.fn
.cycle
.transitions
= {
986 fade: function($cont
, $slides
, opts
) {
987 $slides
.not(':eq('+opts
.currSlide
+')').css('opacity',0);
988 opts
.before
.push(function(curr
,next
,opts
) {
989 $.fn
.cycle
.commonReset(curr
,next
,opts
);
990 opts
.cssBefore
.opacity
= 0;
992 opts
.animIn
= { opacity
: 1 };
993 opts
.animOut
= { opacity
: 0 };
994 opts
.cssBefore
= { top
: 0, left
: 0 };
998 $.fn
.cycle
.ver = function() { return ver
; };
1000 // override these globally if you like (they are all optional)
1001 $.fn
.cycle
.defaults
= {
1002 activePagerClass
: 'activeSlide', // class name used for the active pager link
1003 after
: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
1004 allowPagerClickBubble
: false, // allows or prevents click event on pager anchors from bubbling
1005 animIn
: null, // properties that define how the slide animates in
1006 animOut
: null, // properties that define how the slide animates out
1007 aspect
: false, // preserve aspect ratio during fit resizing, cropping if necessary (must be used with fit option)
1008 autostop
: 0, // true to end slideshow after X transitions (where X == slide count)
1009 autostopCount
: 0, // number of transitions (optionally used with autostop to define X)
1010 backwards
: false, // true to start slideshow at last slide and move backwards through the stack
1011 before
: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
1012 center
: null, // set to true to have cycle add top/left margin to each slide (use with width and height options)
1013 cleartype
: !$.support
.opacity
, // true if clearType corrections should be applied (for IE)
1014 cleartypeNoBg
: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
1015 containerResize
: 1, // resize container to fit largest slide
1016 continuous
: 0, // true to start next transition immediately after current one completes
1017 cssAfter
: null, // properties that defined the state of the slide after transitioning out
1018 cssBefore
: null, // properties that define the initial state of the slide before transitioning in
1019 delay
: 0, // additional delay (in ms) for first transition (hint: can be negative)
1020 easeIn
: null, // easing for "in" transition
1021 easeOut
: null, // easing for "out" transition
1022 easing
: null, // easing method for both in and out transitions
1023 end
: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
1024 fastOnEvent
: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
1025 fit
: 0, // force slides to fit container
1026 fx
: 'fade', // name of transition effect (or comma separated names, ex: 'fade,scrollUp,shuffle')
1027 fxFn
: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
1028 height
: 'auto', // container height (if the 'fit' option is true, the slides will be set to this height as well)
1029 manualTrump
: true, // causes manual transition to stop an active transition instead of being ignored
1030 metaAttr
: 'cycle',// data- attribute that holds the option data for the slideshow
1031 next
: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for next slide
1032 nowrap
: 0, // true to prevent slideshow from wrapping
1033 onPagerEvent
: null, // callback fn for pager events: function(zeroBasedSlideIndex, slideElement)
1034 onPrevNextEvent
: null,// callback fn for prev/next events: function(isNext, zeroBasedSlideIndex, slideElement)
1035 pager
: null, // element, jQuery object, or jQuery selector string for the element to use as pager container
1036 pagerAnchorBuilder
: null, // callback fn for building anchor links: function(index, DOMelement)
1037 pagerEvent
: 'click.cycle', // name of event which drives the pager navigation
1038 pause
: 0, // true to enable "pause on hover"
1039 pauseOnPagerHover
: 0, // true to pause when hovering over pager link
1040 prev
: null, // element, jQuery object, or jQuery selector string for the element to use as event trigger for previous slide
1041 prevNextEvent
:'click.cycle',// event which drives the manual transition to the previous or next slide
1042 random
: 0, // true for random, false for sequence (not applicable to shuffle fx)
1043 randomizeEffects
: 1, // valid when multiple effects are used; true to make the effect sequence random
1044 requeueOnImageNotLoaded
: true, // requeue the slideshow if any image slides are not yet loaded
1045 requeueTimeout
: 250, // ms delay for requeue
1046 rev
: 0, // causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)
1047 shuffle
: null, // coords for shuffle animation, ex: { top:15, left: 200 }
1048 skipInitializationCallbacks
: false, // set to true to disable the first before/after callback that occurs prior to any transition
1049 slideExpr
: null, // expression for selecting slides (if something other than all children is required)
1050 slideResize
: 1, // force slide width/height to fixed size before every transition
1051 speed
: 1000, // speed of the transition (any valid fx speed value)
1052 speedIn
: null, // speed of the 'in' transition
1053 speedOut
: null, // speed of the 'out' transition
1054 startingSlide
: undefined, // zero-based index of the first slide to be displayed
1055 sync
: 1, // true if in/out transitions should occur simultaneously
1056 timeout
: 4000, // milliseconds between slide transitions (0 to disable auto advance)
1057 timeoutFn
: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
1058 updateActivePagerLink
: null, // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
1059 width
: null // container width (if the 'fit' option is true, the slides will be set to this width as well)
1066 * jQuery Cycle Plugin Transition Definitions
1067 * This script is a plugin for the jQuery Cycle Plugin
1068 * Examples and documentation at: http://malsup.com/jquery/cycle/
1069 * Copyright (c) 2007-2010 M. Alsup
1071 * Dual licensed under the MIT and GPL licenses:
1072 * http://www.opensource.org/licenses/mit-license.php
1073 * http://www.gnu.org/licenses/gpl.html
1078 // These functions define slide initialization and properties for the named
1079 // transitions. To save file size feel free to remove any of these that you
1082 $.fn
.cycle
.transitions
.none = function($cont
, $slides
, opts
) {
1083 opts
.fxFn = function(curr
,next
,opts
,after
){
1090 // not a cross-fade, fadeout only fades out the top slide
1091 $.fn
.cycle
.transitions
.fadeout = function($cont
, $slides
, opts
) {
1092 $slides
.not(':eq('+opts
.currSlide
+')').css({ display
: 'block', 'opacity': 1 });
1093 opts
.before
.push(function(curr
,next
,opts
,w
,h
,rev
) {
1094 $(curr
).css('zIndex',opts
.slideCount
+ (!rev
=== true ? 1 : 0));
1095 $(next
).css('zIndex',opts
.slideCount
+ (!rev
=== true ? 0 : 1));
1097 opts
.animIn
.opacity
= 1;
1098 opts
.animOut
.opacity
= 0;
1099 opts
.cssBefore
.opacity
= 1;
1100 opts
.cssBefore
.display
= 'block';
1101 opts
.cssAfter
.zIndex
= 0;
1104 // scrollUp/Down/Left/Right
1105 $.fn
.cycle
.transitions
.scrollUp = function($cont
, $slides
, opts
) {
1106 $cont
.css('overflow','hidden');
1107 opts
.before
.push($.fn
.cycle
.commonReset
);
1108 var h
= $cont
.height();
1109 opts
.cssBefore
.top
= h
;
1110 opts
.cssBefore
.left
= 0;
1111 opts
.cssFirst
.top
= 0;
1112 opts
.animIn
.top
= 0;
1113 opts
.animOut
.top
= -h
;
1115 $.fn
.cycle
.transitions
.scrollDown = function($cont
, $slides
, opts
) {
1116 $cont
.css('overflow','hidden');
1117 opts
.before
.push($.fn
.cycle
.commonReset
);
1118 var h
= $cont
.height();
1119 opts
.cssFirst
.top
= 0;
1120 opts
.cssBefore
.top
= -h
;
1121 opts
.cssBefore
.left
= 0;
1122 opts
.animIn
.top
= 0;
1123 opts
.animOut
.top
= h
;
1125 $.fn
.cycle
.transitions
.scrollLeft = function($cont
, $slides
, opts
) {
1126 $cont
.css('overflow','hidden');
1127 opts
.before
.push($.fn
.cycle
.commonReset
);
1128 var w
= $cont
.width();
1129 opts
.cssFirst
.left
= 0;
1130 opts
.cssBefore
.left
= w
;
1131 opts
.cssBefore
.top
= 0;
1132 opts
.animIn
.left
= 0;
1133 opts
.animOut
.left
= 0-w
;
1135 $.fn
.cycle
.transitions
.scrollRight = function($cont
, $slides
, opts
) {
1136 $cont
.css('overflow','hidden');
1137 opts
.before
.push($.fn
.cycle
.commonReset
);
1138 var w
= $cont
.width();
1139 opts
.cssFirst
.left
= 0;
1140 opts
.cssBefore
.left
= -w
;
1141 opts
.cssBefore
.top
= 0;
1142 opts
.animIn
.left
= 0;
1143 opts
.animOut
.left
= w
;
1145 $.fn
.cycle
.transitions
.scrollHorz = function($cont
, $slides
, opts
) {
1146 $cont
.css('overflow','hidden').width();
1147 opts
.before
.push(function(curr
, next
, opts
, fwd
) {
1150 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1151 opts
.cssBefore
.left
= fwd
? (next
.cycleW
-1) : (1-next
.cycleW
);
1152 opts
.animOut
.left
= fwd
? -curr
.cycleW
: curr
.cycleW
;
1154 opts
.cssFirst
.left
= 0;
1155 opts
.cssBefore
.top
= 0;
1156 opts
.animIn
.left
= 0;
1157 opts
.animOut
.top
= 0;
1159 $.fn
.cycle
.transitions
.scrollVert = function($cont
, $slides
, opts
) {
1160 $cont
.css('overflow','hidden');
1161 opts
.before
.push(function(curr
, next
, opts
, fwd
) {
1164 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1165 opts
.cssBefore
.top
= fwd
? (1-next
.cycleH
) : (next
.cycleH
-1);
1166 opts
.animOut
.top
= fwd
? curr
.cycleH
: -curr
.cycleH
;
1168 opts
.cssFirst
.top
= 0;
1169 opts
.cssBefore
.left
= 0;
1170 opts
.animIn
.top
= 0;
1171 opts
.animOut
.left
= 0;
1175 $.fn
.cycle
.transitions
.slideX = function($cont
, $slides
, opts
) {
1176 opts
.before
.push(function(curr
, next
, opts
) {
1177 $(opts
.elements
).not(curr
).hide();
1178 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,true);
1179 opts
.animIn
.width
= next
.cycleW
;
1181 opts
.cssBefore
.left
= 0;
1182 opts
.cssBefore
.top
= 0;
1183 opts
.cssBefore
.width
= 0;
1184 opts
.animIn
.width
= 'show';
1185 opts
.animOut
.width
= 0;
1187 $.fn
.cycle
.transitions
.slideY = function($cont
, $slides
, opts
) {
1188 opts
.before
.push(function(curr
, next
, opts
) {
1189 $(opts
.elements
).not(curr
).hide();
1190 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,false);
1191 opts
.animIn
.height
= next
.cycleH
;
1193 opts
.cssBefore
.left
= 0;
1194 opts
.cssBefore
.top
= 0;
1195 opts
.cssBefore
.height
= 0;
1196 opts
.animIn
.height
= 'show';
1197 opts
.animOut
.height
= 0;
1201 $.fn
.cycle
.transitions
.shuffle = function($cont
, $slides
, opts
) {
1202 var i
, w
= $cont
.css('overflow', 'visible').width();
1203 $slides
.css({left
: 0, top
: 0});
1204 opts
.before
.push(function(curr
,next
,opts
) {
1205 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,true,true);
1207 // only adjust speed once!
1208 if (!opts
.speedAdjusted
) {
1209 opts
.speed
= opts
.speed
/ 2; // shuffle has 2 transitions
1210 opts
.speedAdjusted
= true;
1213 opts
.shuffle
= opts
.shuffle
|| {left
:-w
, top
:15};
1215 for (i
=0; i
< $slides
.length
; i
++)
1216 opts
.els
.push($slides
[i
]);
1218 for (i
=0; i
< opts
.currSlide
; i
++)
1219 opts
.els
.push(opts
.els
.shift());
1221 // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
1222 opts
.fxFn = function(curr
, next
, opts
, cb
, fwd
) {
1225 var $el
= fwd
? $(curr
) : $(next
);
1226 $(next
).css(opts
.cssBefore
);
1227 var count
= opts
.slideCount
;
1228 $el
.animate(opts
.shuffle
, opts
.speedIn
, opts
.easeIn
, function() {
1229 var hops
= $.fn
.cycle
.hopsFromLast(opts
, fwd
);
1230 for (var k
=0; k
< hops
; k
++)
1231 fwd
? opts
.els
.push(opts
.els
.shift()) : opts
.els
.unshift(opts
.els
.pop());
1233 for (var i
=0, len
=opts
.els
.length
; i
< len
; i
++)
1234 $(opts
.els
[i
]).css('z-index', len
-i
+count
);
1237 var z
= $(curr
).css('z-index');
1238 $el
.css('z-index', parseInt(z
,10)+1+count
);
1240 $el
.animate({left
:0, top
:0}, opts
.speedOut
, opts
.easeOut
, function() {
1241 $(fwd
? this : curr
).hide();
1246 $.extend(opts
.cssBefore
, { display
: 'block', opacity
: 1, top
: 0, left
: 0 });
1249 // turnUp/Down/Left/Right
1250 $.fn
.cycle
.transitions
.turnUp = function($cont
, $slides
, opts
) {
1251 opts
.before
.push(function(curr
, next
, opts
) {
1252 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,false);
1253 opts
.cssBefore
.top
= next
.cycleH
;
1254 opts
.animIn
.height
= next
.cycleH
;
1255 opts
.animOut
.width
= next
.cycleW
;
1257 opts
.cssFirst
.top
= 0;
1258 opts
.cssBefore
.left
= 0;
1259 opts
.cssBefore
.height
= 0;
1260 opts
.animIn
.top
= 0;
1261 opts
.animOut
.height
= 0;
1263 $.fn
.cycle
.transitions
.turnDown = function($cont
, $slides
, opts
) {
1264 opts
.before
.push(function(curr
, next
, opts
) {
1265 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,false);
1266 opts
.animIn
.height
= next
.cycleH
;
1267 opts
.animOut
.top
= curr
.cycleH
;
1269 opts
.cssFirst
.top
= 0;
1270 opts
.cssBefore
.left
= 0;
1271 opts
.cssBefore
.top
= 0;
1272 opts
.cssBefore
.height
= 0;
1273 opts
.animOut
.height
= 0;
1275 $.fn
.cycle
.transitions
.turnLeft = function($cont
, $slides
, opts
) {
1276 opts
.before
.push(function(curr
, next
, opts
) {
1277 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,true);
1278 opts
.cssBefore
.left
= next
.cycleW
;
1279 opts
.animIn
.width
= next
.cycleW
;
1281 opts
.cssBefore
.top
= 0;
1282 opts
.cssBefore
.width
= 0;
1283 opts
.animIn
.left
= 0;
1284 opts
.animOut
.width
= 0;
1286 $.fn
.cycle
.transitions
.turnRight = function($cont
, $slides
, opts
) {
1287 opts
.before
.push(function(curr
, next
, opts
) {
1288 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,true);
1289 opts
.animIn
.width
= next
.cycleW
;
1290 opts
.animOut
.left
= curr
.cycleW
;
1292 $.extend(opts
.cssBefore
, { top
: 0, left
: 0, width
: 0 });
1293 opts
.animIn
.left
= 0;
1294 opts
.animOut
.width
= 0;
1298 $.fn
.cycle
.transitions
.zoom = function($cont
, $slides
, opts
) {
1299 opts
.before
.push(function(curr
, next
, opts
) {
1300 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,false,true);
1301 opts
.cssBefore
.top
= next
.cycleH
/2;
1302 opts
.cssBefore
.left
= next
.cycleW
/2;
1303 $.extend(opts
.animIn
, { top
: 0, left
: 0, width
: next
.cycleW
, height
: next
.cycleH
});
1304 $.extend(opts
.animOut
, { width
: 0, height
: 0, top
: curr
.cycleH
/2, left: curr.cycleW/2 });
1306 opts
.cssFirst
.top
= 0;
1307 opts
.cssFirst
.left
= 0;
1308 opts
.cssBefore
.width
= 0;
1309 opts
.cssBefore
.height
= 0;
1313 $.fn
.cycle
.transitions
.fadeZoom = function($cont
, $slides
, opts
) {
1314 opts
.before
.push(function(curr
, next
, opts
) {
1315 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,false);
1316 opts
.cssBefore
.left
= next
.cycleW
/2;
1317 opts
.cssBefore
.top
= next
.cycleH
/2;
1318 $.extend(opts
.animIn
, { top
: 0, left
: 0, width
: next
.cycleW
, height
: next
.cycleH
});
1320 opts
.cssBefore
.width
= 0;
1321 opts
.cssBefore
.height
= 0;
1322 opts
.animOut
.opacity
= 0;
1326 $.fn
.cycle
.transitions
.blindX = function($cont
, $slides
, opts
) {
1327 var w
= $cont
.css('overflow','hidden').width();
1328 opts
.before
.push(function(curr
, next
, opts
) {
1329 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1330 opts
.animIn
.width
= next
.cycleW
;
1331 opts
.animOut
.left
= curr
.cycleW
;
1333 opts
.cssBefore
.left
= w
;
1334 opts
.cssBefore
.top
= 0;
1335 opts
.animIn
.left
= 0;
1336 opts
.animOut
.left
= w
;
1339 $.fn
.cycle
.transitions
.blindY = function($cont
, $slides
, opts
) {
1340 var h
= $cont
.css('overflow','hidden').height();
1341 opts
.before
.push(function(curr
, next
, opts
) {
1342 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1343 opts
.animIn
.height
= next
.cycleH
;
1344 opts
.animOut
.top
= curr
.cycleH
;
1346 opts
.cssBefore
.top
= h
;
1347 opts
.cssBefore
.left
= 0;
1348 opts
.animIn
.top
= 0;
1349 opts
.animOut
.top
= h
;
1352 $.fn
.cycle
.transitions
.blindZ = function($cont
, $slides
, opts
) {
1353 var h
= $cont
.css('overflow','hidden').height();
1354 var w
= $cont
.width();
1355 opts
.before
.push(function(curr
, next
, opts
) {
1356 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1357 opts
.animIn
.height
= next
.cycleH
;
1358 opts
.animOut
.top
= curr
.cycleH
;
1360 opts
.cssBefore
.top
= h
;
1361 opts
.cssBefore
.left
= w
;
1362 opts
.animIn
.top
= 0;
1363 opts
.animIn
.left
= 0;
1364 opts
.animOut
.top
= h
;
1365 opts
.animOut
.left
= w
;
1368 // growX - grow horizontally from centered 0 width
1369 $.fn
.cycle
.transitions
.growX = function($cont
, $slides
, opts
) {
1370 opts
.before
.push(function(curr
, next
, opts
) {
1371 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,true);
1372 opts
.cssBefore
.left
= this.cycleW
/2;
1373 opts
.animIn
.left
= 0;
1374 opts
.animIn
.width
= this.cycleW
;
1375 opts
.animOut
.left
= 0;
1377 opts
.cssBefore
.top
= 0;
1378 opts
.cssBefore
.width
= 0;
1380 // growY - grow vertically from centered 0 height
1381 $.fn
.cycle
.transitions
.growY = function($cont
, $slides
, opts
) {
1382 opts
.before
.push(function(curr
, next
, opts
) {
1383 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,false);
1384 opts
.cssBefore
.top
= this.cycleH
/2;
1385 opts
.animIn
.top
= 0;
1386 opts
.animIn
.height
= this.cycleH
;
1387 opts
.animOut
.top
= 0;
1389 opts
.cssBefore
.height
= 0;
1390 opts
.cssBefore
.left
= 0;
1393 // curtainX - squeeze in both edges horizontally
1394 $.fn
.cycle
.transitions
.curtainX = function($cont
, $slides
, opts
) {
1395 opts
.before
.push(function(curr
, next
, opts
) {
1396 $.fn
.cycle
.commonReset(curr
,next
,opts
,false,true,true);
1397 opts
.cssBefore
.left
= next
.cycleW
/2;
1398 opts
.animIn
.left
= 0;
1399 opts
.animIn
.width
= this.cycleW
;
1400 opts
.animOut
.left
= curr
.cycleW
/2;
1401 opts
.animOut
.width
= 0;
1403 opts
.cssBefore
.top
= 0;
1404 opts
.cssBefore
.width
= 0;
1406 // curtainY - squeeze in both edges vertically
1407 $.fn
.cycle
.transitions
.curtainY = function($cont
, $slides
, opts
) {
1408 opts
.before
.push(function(curr
, next
, opts
) {
1409 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,false,true);
1410 opts
.cssBefore
.top
= next
.cycleH
/2;
1411 opts
.animIn
.top
= 0;
1412 opts
.animIn
.height
= next
.cycleH
;
1413 opts
.animOut
.top
= curr
.cycleH
/2;
1414 opts
.animOut
.height
= 0;
1416 opts
.cssBefore
.height
= 0;
1417 opts
.cssBefore
.left
= 0;
1420 // cover - curr slide covered by next slide
1421 $.fn
.cycle
.transitions
.cover = function($cont
, $slides
, opts
) {
1422 var d
= opts
.direction
|| 'left';
1423 var w
= $cont
.css('overflow','hidden').width();
1424 var h
= $cont
.height();
1425 opts
.before
.push(function(curr
, next
, opts
) {
1426 $.fn
.cycle
.commonReset(curr
,next
,opts
);
1428 opts
.cssBefore
.left
= -w
;
1430 opts
.cssBefore
.top
= h
;
1431 else if (d
== 'down')
1432 opts
.cssBefore
.top
= -h
;
1434 opts
.cssBefore
.left
= w
;
1436 opts
.animIn
.left
= 0;
1437 opts
.animIn
.top
= 0;
1438 opts
.cssBefore
.top
= 0;
1439 opts
.cssBefore
.left
= 0;
1442 // uncover - curr slide moves off next slide
1443 $.fn
.cycle
.transitions
.uncover = function($cont
, $slides
, opts
) {
1444 var d
= opts
.direction
|| 'left';
1445 var w
= $cont
.css('overflow','hidden').width();
1446 var h
= $cont
.height();
1447 opts
.before
.push(function(curr
, next
, opts
) {
1448 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,true,true);
1450 opts
.animOut
.left
= w
;
1452 opts
.animOut
.top
= -h
;
1453 else if (d
== 'down')
1454 opts
.animOut
.top
= h
;
1456 opts
.animOut
.left
= -w
;
1458 opts
.animIn
.left
= 0;
1459 opts
.animIn
.top
= 0;
1460 opts
.cssBefore
.top
= 0;
1461 opts
.cssBefore
.left
= 0;
1464 // toss - move top slide and fade away
1465 $.fn
.cycle
.transitions
.toss = function($cont
, $slides
, opts
) {
1466 var w
= $cont
.css('overflow','visible').width();
1467 var h
= $cont
.height();
1468 opts
.before
.push(function(curr
, next
, opts
) {
1469 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,true,true);
1470 // provide default toss settings if animOut not provided
1471 if (!opts
.animOut
.left
&& !opts
.animOut
.top
)
1472 $.extend(opts
.animOut
, { left
: w
*2, top
: -h
/2, opacity
: 0 });
1474 opts
.animOut
.opacity
= 0;
1476 opts
.cssBefore
.left
= 0;
1477 opts
.cssBefore
.top
= 0;
1478 opts
.animIn
.left
= 0;
1481 // wipe - clip animation
1482 $.fn
.cycle
.transitions
.wipe = function($cont
, $slides
, opts
) {
1483 var w
= $cont
.css('overflow','hidden').width();
1484 var h
= $cont
.height();
1485 opts
.cssBefore
= opts
.cssBefore
|| {};
1488 if (/l2r/.test(opts
.clip
))
1489 clip
= 'rect(0px 0px '+h
+'px 0px)';
1490 else if (/r2l/.test(opts
.clip
))
1491 clip
= 'rect(0px '+w
+'px '+h
+'px '+w
+'px)';
1492 else if (/t2b/.test(opts
.clip
))
1493 clip
= 'rect(0px '+w
+'px 0px 0px)';
1494 else if (/b2t/.test(opts
.clip
))
1495 clip
= 'rect('+h
+'px '+w
+'px '+h
+'px 0px)';
1496 else if (/zoom/.test(opts
.clip
)) {
1497 var top
= parseInt(h
/2,10);
1498 var left
= parseInt(w
/2,10);
1499 clip
= 'rect('+top
+'px '+left
+'px '+top
+'px '+left
+'px)';
1503 opts
.cssBefore
.clip
= opts
.cssBefore
.clip
|| clip
|| 'rect(0px 0px 0px 0px)';
1505 var d
= opts
.cssBefore
.clip
.match(/(\d+)/g);
1506 var t
= parseInt(d
[0],10), r
= parseInt(d
[1],10), b
= parseInt(d
[2],10), l
= parseInt(d
[3],10);
1508 opts
.before
.push(function(curr
, next
, opts
) {
1509 if (curr
== next
) return;
1510 var $curr
= $(curr
), $next
= $(next
);
1511 $.fn
.cycle
.commonReset(curr
,next
,opts
,true,true,false);
1512 opts
.cssAfter
.display
= 'block';
1514 var step
= 1, count
= parseInt((opts
.speedIn
/ 13),10) - 1;
1516 var tt
= t
? t
- parseInt(step
* (t
/count
),10) : 0;
1517 var ll
= l
? l
- parseInt(step
* (l
/count
),10) : 0;
1518 var bb
= b
< h
? b
+ parseInt(step
* ((h
-b
)/count
|| 1),10) : h
;
1519 var rr
= r
< w
? r
+ parseInt(step
* ((w
-r
)/count
|| 1),10) : w
;
1520 $next
.css({ clip
: 'rect('+tt
+'px '+rr
+'px '+bb
+'px '+ll
+'px)' });
1521 (step
++ <= count
) ? setTimeout(f
, 13) : $curr
.css('display', 'none');
1524 $.extend(opts
.cssBefore
, { display
: 'block', opacity
: 1, top
: 0, left
: 0 });
1525 opts
.animIn
= { left
: 0 };
1526 opts
.animOut
= { left
: 0 };