Mercurial > public > bravenewsurf

comparison bns_website/static/js/bxslider/source/jquery.bxSlider.js @ 53:98cc19041d8f bands-experimental-ui

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
New slider based design for the Bands page.
author Chris Ridgway <ckridgway@gmail.com>
date Mon, 14 Nov 2011 19:55:14 -0600
parents
children
comparison
equal deleted inserted replaced
52:12a39a6f5247 53:98cc19041d8f
1 /**
2 * jQuery bxSlider v3.0
3 * http://bxslider.com
4 *
5 * Copyright 2011, Steven Wanderski
6 * http://bxcreative.com
7 *
8 * Free to use and abuse under the MIT license.
9 * http://www.opensource.org/licenses/mit-license.php
10 *
11 */
12
13
14 (function($){
15
16 $.fn.bxSlider = function(options){
17
18 var defaults = {
19 mode: 'horizontal', // 'horizontal', 'vertical', 'fade'
20 infiniteLoop: true, // true, false - display first slide after last
21 hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first
22 controls: true, // true, false - previous and next controls
23 speed: 500, // integer - in ms, duration of time slide transitions will occupy
24 easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
25 pager: false, // true / false - display a pager
26 pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
27 pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4
28 pagerLocation: 'bottom', // 'bottom', 'top' - location of pager
29 pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4
30 pagerActiveClass: 'pager-active', // string - classname attached to the active pager link
31 nextText: 'next', // string - text displayed for 'next' control
32 nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg'
33 nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
34 prevText: 'prev', // string - text displayed for 'previous' control
35 prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg'
36 prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
37 captions: false, // true, false - display image captions (reads the image 'title' tag)
38 captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
39 auto: false, // true, false - make slideshow change automatically
40 autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse
41 autoControls: false, // true, false - show 'start' and 'stop' controls for auto show
42 autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
43 autoStart: true, // true, false - if false show will wait for 'start' control to activate
44 autoHover: false, // true, false - if true show will pause on mouseover
45 autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
46 pause: 3000, // integer - in ms, the duration between each slide transition
47 startText: 'start', // string - text displayed for 'start' control
48 startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg'
49 stopText: 'stop', // string - text displayed for 'stop' control
50 stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'
51 ticker: false, // true, false - continuous motion ticker mode (think news ticker)
52 // note: autoControls, autoControlsSelector, and autoHover apply to ticker!
53 tickerSpeed: 5000, // float - use value between 1 and 5000 to determine ticker speed - the smaller the value the faster the ticker speed
54 tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
55 tickerHover: false, // true, false - if true ticker will pause on mouseover
56 wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
57 startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
58 displaySlideQty: 1, // integer - number of slides to display at once
59 moveSlideQty: 1, // integer - number of slides to move at once
60 randomStart: false, // true, false - if true show will start on a random slide
61 onBeforeSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
62 onAfterSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
63 onLastSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
64 onFirstSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
65 onNextSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
66 onPrevSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
67 buildPager: null // function(slideIndex, slideHtmlObject){ return string; } - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
68 }
69
70 var options = $.extend(defaults, options);
71
72 // cache the base element
73 var base = this;
74 // initialize (and localize) all variables
75 var $parent = '';
76 var $origElement = '';
77 var $children = '';
78 var $outerWrapper = '';
79 var $firstChild = '';
80 var childrenWidth = '';
81 var childrenOuterWidth = '';
82 var wrapperWidth = '';
83 var wrapperHeight = '';
84 var $pager = '';
85 var interval = '';
86 var $autoControls = '';
87 var $stopHtml = '';
88 var $startContent = '';
89 var $stopContent = '';
90 var autoPlaying = true;
91 var loaded = false;
92 var childrenMaxWidth = 0;
93 var childrenMaxHeight = 0;
94 var currentSlide = 0;
95 var origLeft = 0;
96 var origTop = 0;
97 var origShowWidth = 0;
98 var origShowHeight = 0;
99 var tickerLeft = 0;
100 var tickerTop = 0;
101 var isWorking = false;
102
103 var firstSlide = 0;
104 var lastSlide = $children.length - 1;
105
106
107 // PUBLIC FUNCTIONS
108
109 /**
110 * Go to specified slide
111 */
112 this.goToSlide = function(number, stopAuto){
113 if(!isWorking){
114 isWorking = true;
115 // set current slide to argument
116 currentSlide = number;
117 options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
118 // check if stopAuto argument is supplied
119 if(typeof(stopAuto) == 'undefined'){
120 var stopAuto = true;
121 }
122 if(stopAuto){
123 // if show is auto playing, stop it
124 if(options.auto){
125 base.stopShow(true);
126 }
127 }
128 slide = number;
129 // check for first slide callback
130 if(slide == firstSlide){
131 options.onFirstSlide(currentSlide, $children.length, $children.eq(currentSlide));
132 }
133 // check for last slide callback
134 if(slide == lastSlide){
135 options.onLastSlide(currentSlide, $children.length, $children.eq(currentSlide));
136 }
137 // horizontal
138 if(options.mode == 'horizontal'){
139 $parent.animate({'left': '-'+getSlidePosition(slide, 'left')+'px'}, options.speed, options.easing, function(){
140 isWorking = false;
141 // perform the callback function
142 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
143 });
144 // vertical
145 }else if(options.mode == 'vertical'){
146 $parent.animate({'top': '-'+getSlidePosition(slide, 'top')+'px'}, options.speed, options.easing, function(){
147 isWorking = false;
148 // perform the callback function
149 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
150 });
151 // fade
152 }else if(options.mode == 'fade'){
153 setChildrenFade();
154 }
155 // check to remove controls on last/first slide
156 checkEndControls();
157 // accomodate multi slides
158 if(options.moveSlideQty > 1){
159 number = Math.floor(number / options.moveSlideQty);
160 }
161 // make the current slide active
162 makeSlideActive(number);
163 // display the caption
164 showCaptions();
165 }
166 }
167
168 /**
169 * Go to next slide
170 */
171 this.goToNextSlide = function(stopAuto){
172 // check if stopAuto argument is supplied
173 if(typeof(stopAuto) == 'undefined'){
174 var stopAuto = true;
175 }
176 if(stopAuto){
177 // if show is auto playing, stop it
178 if(options.auto){
179 base.stopShow(true);
180 }
181 }
182 // makes slideshow finite
183 if(!options.infiniteLoop){
184 if(!isWorking){
185 var slideLoop = false;
186 // make current slide the old value plus moveSlideQty
187 currentSlide = (currentSlide + (options.moveSlideQty));
188 // if current slide has looped on itself
189 if(currentSlide <= lastSlide){
190 checkEndControls();
191 // next slide callback
192 options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
193 // move to appropriate slide
194 base.goToSlide(currentSlide);
195 }else{
196 currentSlide -= options.moveSlideQty;
197 }
198 } // end if(!isWorking)
199 }else{
200 if(!isWorking){
201 isWorking = true;
202 var slideLoop = false;
203 // make current slide the old value plus moveSlideQty
204 currentSlide = (currentSlide + options.moveSlideQty);
205 // if current slide has looped on itself
206 if(currentSlide > lastSlide){
207 currentSlide = currentSlide % $children.length;
208 slideLoop = true;
209 }
210 // next slide callback
211 options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
212 // slide before callback
213 options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
214 if(options.mode == 'horizontal'){
215 // get the new 'left' property for $parent
216 var parentLeft = (options.moveSlideQty * childrenOuterWidth);
217 // animate to the new 'left'
218 $parent.animate({'left': '-='+parentLeft+'px'}, options.speed, options.easing, function(){
219 isWorking = false;
220 // if its time to loop, reset the $parent
221 if(slideLoop){
222 $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px');
223 }
224 // perform the callback function
225 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
226 });
227 }else if(options.mode == 'vertical'){
228 // get the new 'left' property for $parent
229 var parentTop = (options.moveSlideQty * childrenMaxHeight);
230 // animate to the new 'left'
231 $parent.animate({'top': '-='+parentTop+'px'}, options.speed, options.easing, function(){
232 isWorking = false;
233 // if its time to loop, reset the $parent
234 if(slideLoop){
235 $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px');
236 }
237 // perform the callback function
238 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
239 });
240 }else if(options.mode == 'fade'){
241 setChildrenFade();
242 }
243 // make the current slide active
244 if(options.moveSlideQty > 1){
245 makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
246 }else{
247 makeSlideActive(currentSlide);
248 }
249 // display the caption
250 showCaptions();
251 } // end if(!isWorking)
252
253 }
254 } // end function
255
256 /**
257 * Go to previous slide
258 */
259 this.goToPreviousSlide = function(stopAuto){
260 // check if stopAuto argument is supplied
261 if(typeof(stopAuto) == 'undefined'){
262 var stopAuto = true;
263 }
264 if(stopAuto){
265 // if show is auto playing, stop it
266 if(options.auto){
267 base.stopShow(true);
268 }
269 }
270 // makes slideshow finite
271 if(!options.infiniteLoop){
272 if(!isWorking){
273 var slideLoop = false;
274 // make current slide the old value plus moveSlideQty
275 currentSlide = currentSlide - options.moveSlideQty;
276 // if current slide has looped on itself
277 if(currentSlide < 0){
278 currentSlide = 0;
279 // if specified, hide the control on the last slide
280 if(options.hideControlOnEnd){
281 $('.bx-prev', $outerWrapper).hide();
282 }
283 }
284 checkEndControls();
285 // next slide callback
286 options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
287 // move to appropriate slide
288 base.goToSlide(currentSlide);
289 }
290 }else{
291 if(!isWorking){
292 isWorking = true;
293 var slideLoop = false;
294 // make current slide the old value plus moveSlideQty
295 currentSlide = (currentSlide - (options.moveSlideQty));
296 // if current slide has looped on itself
297 if(currentSlide < 0){
298 negativeOffset = (currentSlide % $children.length);
299 if(negativeOffset == 0){
300 currentSlide = 0;
301 }else{
302 currentSlide = ($children.length) + negativeOffset;
303 }
304 slideLoop = true;
305 }
306 // next slide callback
307 options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
308 // slide before callback
309 options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
310 if(options.mode == 'horizontal'){
311 // get the new 'left' property for $parent
312 var parentLeft = (options.moveSlideQty * childrenOuterWidth);
313 // animate to the new 'left'
314 $parent.animate({'left': '+='+parentLeft+'px'}, options.speed, options.easing, function(){
315 isWorking = false;
316 // if its time to loop, reset the $parent
317 if(slideLoop){
318 $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px');
319 }
320 // perform the callback function
321 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
322 });
323 }else if(options.mode == 'vertical'){
324 // get the new 'left' property for $parent
325 var parentTop = (options.moveSlideQty * childrenMaxHeight);
326 // animate to the new 'left'
327 $parent.animate({'top': '+='+parentTop+'px'}, options.speed, options.easing, function(){
328 isWorking = false;
329 // if its time to loop, reset the $parent
330 if(slideLoop){
331 $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px');
332 }
333 // perform the callback function
334 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
335 });
336 }else if(options.mode == 'fade'){
337 setChildrenFade();
338 }
339 // make the current slide active
340 if(options.moveSlideQty > 1){
341 makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
342 }else{
343 makeSlideActive(currentSlide);
344 }
345 // display the caption
346 showCaptions();
347 } // end if(!isWorking)
348 }
349 } // end function
350
351 /**
352 * Go to first slide
353 */
354 this.goToFirstSlide = function(stopAuto){
355 // check if stopAuto argument is supplied
356 if(typeof(stopAuto) == 'undefined'){
357 var stopAuto = true;
358 }
359 base.goToSlide(firstSlide, stopAuto);
360 }
361
362 /**
363 * Go to last slide
364 */
365 this.goToLastSlide = function(){
366 // check if stopAuto argument is supplied
367 if(typeof(stopAuto) == 'undefined'){
368 var stopAuto = true;
369 }
370 base.goToSlide(lastSlide, stopAuto);
371 }
372
373 /**
374 * Get the current slide
375 */
376 this.getCurrentSlide = function(){
377 return currentSlide;
378 }
379
380 /**
381 * Get the total slide count
382 */
383 this.getSlideCount = function(){
384 return $children.length;
385 }
386
387 /**
388 * Stop the slideshow
389 */
390 this.stopShow = function(changeText){
391 clearInterval(interval);
392 // check if changeText argument is supplied
393 if(typeof(changeText) == 'undefined'){
394 var changeText = true;
395 }
396 if(changeText && options.autoControls){
397 $autoControls.html($startContent).removeClass('stop').addClass('start');
398 autoPlaying = false;
399 }
400 }
401
402 /**
403 * Start the slideshow
404 */
405 this.startShow = function(changeText){
406 // check if changeText argument is supplied
407 if(typeof(changeText) == 'undefined'){
408 var changeText = true;
409 }
410 setAutoInterval();
411 if(changeText && options.autoControls){
412 $autoControls.html($stopContent).removeClass('start').addClass('stop');
413 autoPlaying = true;
414 }
415 }
416
417 /**
418 * Stops the ticker
419 */
420 this.stopTicker = function(changeText){
421 $parent.stop();
422 // check if changeText argument is supplied
423 if(typeof(changeText) == 'undefined'){
424 var changeText = true;
425 }
426 if(changeText && options.ticker){
427 $autoControls.html($startContent).removeClass('stop').addClass('start');
428 autoPlaying = false;
429 }
430 }
431
432 /**
433 * Starts the ticker
434 */
435 this.startTicker = function(changeText){
436 if(options.mode == 'horizontal'){
437 if(options.tickerDirection == 'next'){
438 // get the 'left' property where the ticker stopped
439 var stoppedLeft = parseInt($parent.css('left'));
440 // calculate the remaining distance the show must travel until the loop
441 var remainingDistance = (origShowWidth + stoppedLeft) + $children.eq(0).width();
442 }else if(options.tickerDirection == 'prev'){
443 // get the 'left' property where the ticker stopped
444 var stoppedLeft = -parseInt($parent.css('left'));
445 // calculate the remaining distance the show must travel until the loop
446 var remainingDistance = (stoppedLeft) - $children.eq(0).width();
447 }
448 // calculate the speed ratio to seamlessly finish the loop
449 var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowWidth;
450 // call the show
451 moveTheShow(tickerLeft, remainingDistance, finishingSpeed);
452 }else if(options.mode == 'vertical'){
453 if(options.tickerDirection == 'next'){
454 // get the 'top' property where the ticker stopped
455 var stoppedTop = parseInt($parent.css('top'));
456 // calculate the remaining distance the show must travel until the loop
457 var remainingDistance = (origShowHeight + stoppedTop) + $children.eq(0).height();
458 }else if(options.tickerDirection == 'prev'){
459 // get the 'left' property where the ticker stopped
460 var stoppedTop = -parseInt($parent.css('top'));
461 // calculate the remaining distance the show must travel until the loop
462 var remainingDistance = (stoppedTop) - $children.eq(0).height();
463 }
464 // calculate the speed ratio to seamlessly finish the loop
465 var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowHeight;
466 // call the show
467 moveTheShow(tickerTop, remainingDistance, finishingSpeed);
468 // check if changeText argument is supplied
469 if(typeof(changeText) == 'undefined'){
470 var changeText = true;
471 }
472 if(changeText && options.ticker){
473 $autoControls.html($stopContent).removeClass('start').addClass('stop');
474 autoPlaying = true;
475 }
476 }
477 }
478
479 /**
480 * Initialize a new slideshow
481 */
482 this.initShow = function(){
483
484 // reinitialize all variables
485 // base = this;
486 $parent = $(this);
487 $origElement = $parent.clone();
488 $children = $parent.children();
489 $outerWrapper = '';
490 $firstChild = $parent.children(':first');
491 childrenWidth = $firstChild.width();
492 childrenMaxWidth = 0;
493 childrenOuterWidth = $firstChild.outerWidth();
494 childrenMaxHeight = 0;
495 wrapperWidth = getWrapperWidth();
496 wrapperHeight = getWrapperHeight();
497 isWorking = false;
498 $pager = '';
499 currentSlide = 0;
500 origLeft = 0;
501 origTop = 0;
502 interval = '';
503 $autoControls = '';
504 $stopHtml = '';
505 $startContent = '';
506 $stopContent = '';
507 autoPlaying = true;
508 loaded = false;
509 origShowWidth = 0;
510 origShowHeight = 0;
511 tickerLeft = 0;
512 tickerTop = 0;
513
514 firstSlide = 0;
515 lastSlide = $children.length - 1;
516
517 // get the largest child's height and width
518 $children.each(function(index) {
519 if($(this).outerHeight() > childrenMaxHeight){
520 childrenMaxHeight = $(this).outerHeight();
521 }
522 if($(this).outerWidth() > childrenMaxWidth){
523 childrenMaxWidth = $(this).outerWidth();
524 }
525 });
526
527 // get random slide number
528 if(options.randomStart){
529 var randomNumber = Math.floor(Math.random() * $children.length);
530 currentSlide = randomNumber;
531 origLeft = childrenOuterWidth * (options.moveSlideQty + randomNumber);
532 origTop = childrenMaxHeight * (options.moveSlideQty + randomNumber);
533 // start show at specific slide
534 }else{
535 currentSlide = options.startingSlide;
536 origLeft = childrenOuterWidth * (options.moveSlideQty + options.startingSlide);
537 origTop = childrenMaxHeight * (options.moveSlideQty + options.startingSlide);
538 }
539
540 // set initial css
541 initCss();
542
543 // check to show pager
544 if(options.pager && !options.ticker){
545 if(options.pagerType == 'full'){
546 showPager('full');
547 }else if(options.pagerType == 'short'){
548 showPager('short');
549 }
550 }
551
552 // check to show controls
553 if(options.controls && !options.ticker){
554 setControlsVars();
555 }
556
557 // check if auto
558 if(options.auto || options.ticker){
559 // check if auto controls are displayed
560 if(options.autoControls){
561 setAutoControlsVars();
562 }
563 // check if show should auto start
564 if(options.autoStart){
565 // check if autostart should delay
566 setTimeout(function(){
567 base.startShow(true);
568 }, options.autoDelay);
569 }else{
570 base.stopShow(true);
571 }
572 // check if show should pause on hover
573 if(options.autoHover && !options.ticker){
574 setAutoHover();
575 }
576 }
577 // make the starting slide active
578 if(options.moveSlideQty > 1){
579 makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
580 }else{
581 makeSlideActive(currentSlide);
582 }
583 // check for finite show and if controls should be hidden
584 checkEndControls();
585 // show captions
586 if(options.captions){
587 showCaptions();
588 }
589 // perform the callback function
590 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
591 }
592
593 /**
594 * Destroy the current slideshow
595 */
596 this.destroyShow = function(){
597 // stop the auto show
598 clearInterval(interval);
599 // remove any controls / pagers that have been appended
600 $('.bx-next, .bx-prev, .bx-pager, .bx-auto', $outerWrapper).remove();
601 // unwrap all bx-wrappers
602 $parent.unwrap().unwrap().removeAttr('style');
603 // remove any styles that were appended
604 $parent.children().removeAttr('style').not('.pager').remove();
605 // remove any childrent that were appended
606 $children.removeClass('pager');
607
608 }
609
610 /**
611 * Reload the current slideshow
612 */
613 this.reloadShow = function(){
614 base.destroyShow();
615 base.initShow();
616 }
617
618 // PRIVATE FUNCTIONS
619
620 /**
621 * Creates all neccessary styling for the slideshow
622 */
623 function initCss(){
624 // layout the children
625 setChildrenLayout(options.startingSlide);
626 // CSS for horizontal mode
627 if(options.mode == 'horizontal'){
628 // wrap the <ul> in div that acts as a window and make the <ul> uber wide
629 $parent
630 .wrap('<div class="'+options.wrapperClass+'" style="width:'+wrapperWidth+'px; position:relative;"></div>')
631 .wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:'+wrapperWidth+'px;"></div>')
632 .css({
633 width: '999999px',
634 position: 'relative',
635 left: '-'+(origLeft)+'px'
636 });
637 $parent.children().css({
638 width: childrenWidth,
639 'float': 'left',
640 listStyle: 'none'
641 });
642 $outerWrapper = $parent.parent().parent();
643 $children.addClass('pager');
644 // CSS for vertical mode
645 }else if(options.mode == 'vertical'){
646 // wrap the <ul> in div that acts as a window and make the <ul> uber tall
647 $parent
648 .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>')
649 .wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>')
650 .css({
651 height: '999999px',
652 position: 'relative',
653 top: '-'+(origTop)+'px'
654 });
655 $parent.children().css({
656 listStyle: 'none',
657 height: childrenMaxHeight
658 });
659 $outerWrapper = $parent.parent().parent();
660 $children.addClass('pager');
661 // CSS for fade mode
662 }else if(options.mode == 'fade'){
663 // wrap the <ul> in div that acts as a window
664 $parent
665 .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>')
666 .wrap('<div class="bx-window" style="height:'+childrenMaxHeight+'px; width:'+childrenMaxWidth+'px; position:relative; overflow:hidden;"></div>');
667 $parent.children().css({
668 listStyle: 'none',
669 position: 'absolute',
670 top: 0,
671 left: 0,
672 zIndex: 98
673 });
674 $outerWrapper = $parent.parent().parent();
675 $children.not(':eq('+currentSlide+')').fadeTo(0, 0);
676 $children.eq(currentSlide).css('zIndex', 99);
677 }
678 // if captions = true setup a div placeholder
679 if(options.captions && options.captionsSelector == null){
680 $outerWrapper.append('<div class="bx-captions"></div>');
681 }
682 }
683
684 /**
685 * Depending on mode, lays out children in the proper setup
686 */
687 function setChildrenLayout(){
688 // lays out children for horizontal or vertical modes
689 if(options.mode == 'horizontal' || options.mode == 'vertical'){
690
691 // get the children behind
692 var $prependedChildren = getArraySample($children, 0, options.moveSlideQty, 'backward');
693
694 // add each prepended child to the back of the original element
695 $.each($prependedChildren, function(index) {
696 $parent.prepend($(this));
697 });
698
699 // total number of slides to be hidden after the window
700 var totalNumberAfterWindow = ($children.length + options.moveSlideQty) - 1;
701 // number of original slides hidden after the window
702 var pagerExcess = $children.length - options.displaySlideQty;
703 // number of slides to append to the original hidden slides
704 var numberToAppend = totalNumberAfterWindow - pagerExcess;
705 // get the sample of extra slides to append
706 var $appendedChildren = getArraySample($children, 0, numberToAppend, 'forward');
707
708 if(options.infiniteLoop){
709 // add each appended child to the front of the original element
710 $.each($appendedChildren, function(index) {
711 $parent.append($(this));
712 });
713 }
714 }
715 }
716
717 /**
718 * Sets all variables associated with the controls
719 */
720 function setControlsVars(){
721 // check if text or images should be used for controls
722 // check "next"
723 if(options.nextImage != ''){
724 nextContent = options.nextImage;
725 nextType = 'image';
726 }else{
727 nextContent = options.nextText;
728 nextType = 'text';
729 }
730 // check "prev"
731 if(options.prevImage != ''){
732 prevContent = options.prevImage;
733 prevType = 'image';
734 }else{
735 prevContent = options.prevText;
736 prevType = 'text';
737 }
738 // show the controls
739 showControls(nextType, nextContent, prevType, prevContent);
740 }
741
742 /**
743 * Puts slideshow into auto mode
744 *
745 * @param int pause number of ms the slideshow will wait between slides
746 * @param string direction 'forward', 'backward' sets the direction of the slideshow (forward/backward)
747 * @param bool controls determines if start/stop controls will be displayed
748 */
749 function setAutoInterval(){
750 if(options.auto){
751 // finite loop
752 if(!options.infiniteLoop){
753 if(options.autoDirection == 'next'){
754 interval = setInterval(function(){
755 currentSlide += options.moveSlideQty;
756 // if currentSlide has exceeded total number
757 if(currentSlide > lastSlide){
758 currentSlide = currentSlide % $children.length;
759 }
760 base.goToSlide(currentSlide, false);
761 }, options.pause);
762 }else if(options.autoDirection == 'prev'){
763 interval = setInterval(function(){
764 currentSlide -= options.moveSlideQty;
765 // if currentSlide is smaller than zero
766 if(currentSlide < 0){
767 negativeOffset = (currentSlide % $children.length);
768 if(negativeOffset == 0){
769 currentSlide = 0;
770 }else{
771 currentSlide = ($children.length) + negativeOffset;
772 }
773 }
774 base.goToSlide(currentSlide, false);
775 }, options.pause);
776 }
777 // infinite loop
778 }else{
779 if(options.autoDirection == 'next'){
780 interval = setInterval(function(){
781 base.goToNextSlide(false);
782 }, options.pause);
783 }else if(options.autoDirection == 'prev'){
784 interval = setInterval(function(){
785 base.goToPreviousSlide(false);
786 }, options.pause);
787 }
788 }
789
790 }else if(options.ticker){
791
792 options.tickerSpeed *= 10;
793
794 // get the total width of the original show
795 $('.pager', $outerWrapper).each(function(index) {
796 origShowWidth += $(this).width();
797 origShowHeight += $(this).height();
798 });
799
800 // if prev start the show from the last slide
801 if(options.tickerDirection == 'prev' && options.mode == 'horizontal'){
802 $parent.css('left', '-'+(origShowWidth+origLeft)+'px');
803 }else if(options.tickerDirection == 'prev' && options.mode == 'vertical'){
804 $parent.css('top', '-'+(origShowHeight+origTop)+'px');
805 }
806
807 if(options.mode == 'horizontal'){
808 // get the starting left position
809 tickerLeft = parseInt($parent.css('left'));
810 // start the ticker
811 moveTheShow(tickerLeft, origShowWidth, options.tickerSpeed);
812 }else if(options.mode == 'vertical'){
813 // get the starting top position
814 tickerTop = parseInt($parent.css('top'));
815 // start the ticker
816 moveTheShow(tickerTop, origShowHeight, options.tickerSpeed);
817 }
818
819 // check it tickerHover applies
820 if(options.tickerHover){
821 setTickerHover();
822 }
823 }
824 }
825
826 function moveTheShow(leftCss, distance, speed){
827 // if horizontal
828 if(options.mode == 'horizontal'){
829 // if next
830 if(options.tickerDirection == 'next'){
831 $parent.animate({'left': '-='+distance+'px'}, speed, 'linear', function(){
832 $parent.css('left', leftCss);
833 moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
834 });
835 // if prev
836 }else if(options.tickerDirection == 'prev'){
837 $parent.animate({'left': '+='+distance+'px'}, speed, 'linear', function(){
838 $parent.css('left', leftCss);
839 moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
840 });
841 }
842 // if vertical
843 }else if(options.mode == 'vertical'){
844 // if next
845 if(options.tickerDirection == 'next'){
846 $parent.animate({'top': '-='+distance+'px'}, speed, 'linear', function(){
847 $parent.css('top', leftCss);
848 moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
849 });
850 // if prev
851 }else if(options.tickerDirection == 'prev'){
852 $parent.animate({'top': '+='+distance+'px'}, speed, 'linear', function(){
853 $parent.css('top', leftCss);
854 moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
855 });
856 }
857 }
858 }
859
860 /**
861 * Sets all variables associated with the controls
862 */
863 function setAutoControlsVars(){
864 // check if text or images should be used for controls
865 // check "start"
866 if(options.startImage != ''){
867 startContent = options.startImage;
868 startType = 'image';
869 }else{
870 startContent = options.startText;
871 startType = 'text';
872 }
873 // check "stop"
874 if(options.stopImage != ''){
875 stopContent = options.stopImage;
876 stopType = 'image';
877 }else{
878 stopContent = options.stopText;
879 stopType = 'text';
880 }
881 // show the controls
882 showAutoControls(startType, startContent, stopType, stopContent);
883 }
884
885 /**
886 * Handles hover events for auto shows
887 */
888 function setAutoHover(){
889 // hover over the slider window
890 $outerWrapper.find('.bx-window').hover(function() {
891 if(autoPlaying){
892 base.stopShow(false);
893 }
894 }, function() {
895 if(autoPlaying){
896 base.startShow(false);
897 }
898 });
899 }
900
901 /**
902 * Handles hover events for ticker mode
903 */
904 function setTickerHover(){
905 // on hover stop the animation
906 $parent.hover(function() {
907 if(autoPlaying){
908 base.stopTicker(false);
909 }
910 }, function() {
911 if(autoPlaying){
912 base.startTicker(false);
913 }
914 });
915 }
916
917 /**
918 * Handles fade animation
919 */
920 function setChildrenFade(){
921 // fade out any other child besides the current
922 $children.not(':eq('+currentSlide+')').fadeTo(options.speed, 0).css('zIndex', 98);
923 // fade in the current slide
924 $children.eq(currentSlide).css('zIndex', 99).fadeTo(options.speed, 1, function(){
925 isWorking = false;
926 // ie fade fix
927 if(jQuery.browser.msie){
928 $children.eq(currentSlide).get(0).style.removeAttribute('filter');
929 }
930 // perform the callback function
931 options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
932 });
933 };
934
935 /**
936 * Makes slide active
937 */
938 function makeSlideActive(number){
939 if(options.pagerType == 'full' && options.pager){
940 // remove all active classes
941 $('a', $pager).removeClass(options.pagerActiveClass);
942 // assign active class to appropriate slide
943 $('a', $pager).eq(number).addClass(options.pagerActiveClass);
944 }else if(options.pagerType == 'short' && options.pager){
945 $('.bx-pager-current', $pager).html(currentSlide+1);
946 }
947 }
948
949 /**
950 * Displays next/prev controls
951 *
952 * @param string nextType 'image', 'text'
953 * @param string nextContent if type='image', specify a filepath to the image. if type='text', specify text.
954 * @param string prevType 'image', 'text'
955 * @param string prevContent if type='image', specify a filepath to the image. if type='text', specify text.
956 */
957 function showControls(nextType, nextContent, prevType, prevContent){
958 // create pager html elements
959 var $nextHtml = $('<a href="" class="bx-next"></a>');
960 var $prevHtml = $('<a href="" class="bx-prev"></a>');
961 // check if next is 'text' or 'image'
962 if(nextType == 'text'){
963 $nextHtml.html(nextContent);
964 }else{
965 $nextHtml.html('<img src="'+nextContent+'" />');
966 }
967 // check if prev is 'text' or 'image'
968 if(prevType == 'text'){
969 $prevHtml.html(prevContent);
970 }else{
971 $prevHtml.html('<img src="'+prevContent+'" />');
972 }
973 // check if user supplied a selector to populate next control
974 if(options.prevSelector){
975 $(options.prevSelector).append($prevHtml);
976 }else{
977 $outerWrapper.append($prevHtml);
978 }
979 // check if user supplied a selector to populate next control
980 if(options.nextSelector){
981 $(options.nextSelector).append($nextHtml);
982 }else{
983 $outerWrapper.append($nextHtml);
984 }
985 // click next control
986 $nextHtml.click(function() {
987 base.goToNextSlide();
988 return false;
989 });
990 // click prev control
991 $prevHtml.click(function() {
992 base.goToPreviousSlide();
993 return false;
994 });
995 }
996
997 /**
998 * Displays the pager
999 *
1000 * @param string type 'full', 'short'
1001 */
1002 function showPager(type){
1003 // sets up logic for finite multi slide shows
1004 var pagerQty = $children.length;
1005 // if we are moving more than one at a time and we have a finite loop
1006 if(options.moveSlideQty > 1){
1007 // if slides create an odd number of pages
1008 if($children.length % options.moveSlideQty != 0){
1009 // pagerQty = $children.length / options.moveSlideQty + 1;
1010 pagerQty = Math.ceil($children.length / options.moveSlideQty);
1011 // if slides create an even number of pages
1012 }else{
1013 pagerQty = $children.length / options.moveSlideQty;
1014 }
1015 }
1016 var pagerString = '';
1017 // check if custom build function was supplied
1018 if(options.buildPager){
1019 for(var i=0; i<pagerQty; i++){
1020 pagerString += options.buildPager(i, $children.eq(i * options.moveSlideQty));
1021 }
1022
1023 // if not, use default pager
1024 }else if(type == 'full'){
1025 // build the full pager
1026 for(var i=1; i<=pagerQty; i++){
1027 pagerString += '<a href="" class="pager-link pager-'+i+'">'+i+'</a>';
1028 }
1029 }else if(type == 'short') {
1030 // build the short pager
1031 pagerString = '<span class="bx-pager-current">'+(options.startingSlide+1)+'</span> '+options.pagerShortSeparator+' <span class="bx-pager-total">'+$children.length+'</span>';
1032 }
1033 // check if user supplied a pager selector
1034 if(options.pagerSelector){
1035 $(options.pagerSelector).append(pagerString);
1036 $pager = $(options.pagerSelector);
1037 }else{
1038 var $pagerContainer = $('<div class="bx-pager"></div>');
1039 $pagerContainer.append(pagerString);
1040 // attach the pager to the DOM
1041 if(options.pagerLocation == 'top'){
1042 $outerWrapper.prepend($pagerContainer);
1043 }else if(options.pagerLocation == 'bottom'){
1044 $outerWrapper.append($pagerContainer);
1045 }
1046 // cache the pager element
1047 $pager = $('.bx-pager', $outerWrapper);
1048 }
1049 $pager.children().click(function() {
1050 // only if pager is full mode
1051 if(options.pagerType == 'full'){
1052 // get the index from the link
1053 var slideIndex = $pager.children().index(this);
1054 // accomodate moving more than one slide
1055 if(options.moveSlideQty > 1){
1056 slideIndex *= options.moveSlideQty;
1057 }
1058 base.goToSlide(slideIndex);
1059 }
1060 return false;
1061 });
1062 }
1063
1064 /**
1065 * Displays captions
1066 */
1067 function showCaptions(){
1068 // get the title from each image
1069 var caption = $('img', $children.eq(currentSlide)).attr('title');
1070 // if the caption exists
1071 if(caption != ''){
1072 // if user supplied a selector
1073 if(options.captionsSelector){
1074 $(options.captionsSelector).html(caption);
1075 }else{
1076 $('.bx-captions', $outerWrapper).html(caption);
1077 }
1078 }else{
1079 // if user supplied a selector
1080 if(options.captionsSelector){
1081 $(options.captionsSelector).html('&nbsp;');
1082 }else{
1083 $('.bx-captions', $outerWrapper).html('&nbsp;');
1084 }
1085 }
1086 }
1087
1088 /**
1089 * Displays start/stop controls for auto and ticker mode
1090 *
1091 * @param string type 'image', 'text'
1092 * @param string next [optional] if type='image', specify a filepath to the image. if type='text', specify text.
1093 * @param string prev [optional] if type='image', specify a filepath to the image. if type='text', specify text.
1094 */
1095 function showAutoControls(startType, startContent, stopType, stopContent){
1096 // create pager html elements
1097 $autoControls = $('<a href="" class="bx-start"></a>');
1098 // check if start is 'text' or 'image'
1099 if(startType == 'text'){
1100 $startContent = startContent;
1101 }else{
1102 $startContent = '<img src="'+startContent+'" />';
1103 }
1104 // check if stop is 'text' or 'image'
1105 if(stopType == 'text'){
1106 $stopContent = stopContent;
1107 }else{
1108 $stopContent = '<img src="'+stopContent+'" />';
1109 }
1110 // check if user supplied a selector to populate next control
1111 if(options.autoControlsSelector){
1112 $(options.autoControlsSelector).append($autoControls);
1113 }else{
1114 $outerWrapper.append('<div class="bx-auto"></div>');
1115 $('.bx-auto', $outerWrapper).html($autoControls);
1116 }
1117
1118 // click start control
1119 $autoControls.click(function() {
1120 if(options.ticker){
1121 if($(this).hasClass('stop')){
1122 base.stopTicker();
1123 }else if($(this).hasClass('start')){
1124 base.startTicker();
1125 }
1126 }else{
1127 if($(this).hasClass('stop')){
1128 base.stopShow(true);
1129 }else if($(this).hasClass('start')){
1130 base.startShow(true);
1131 }
1132 }
1133 return false;
1134 });
1135
1136 }
1137
1138 /**
1139 * Checks if show is in finite mode, and if slide is either first or last, then hides the respective control
1140 */
1141 function checkEndControls(){
1142 if(!options.infiniteLoop && options.hideControlOnEnd){
1143 // check previous
1144 if(currentSlide == firstSlide){
1145 $('.bx-prev', $outerWrapper).hide();
1146 }else{
1147 $('.bx-prev', $outerWrapper).show();
1148 }
1149 // check next
1150 if(currentSlide == lastSlide){
1151 $('.bx-next', $outerWrapper).hide();
1152 }else{
1153 $('.bx-next', $outerWrapper).show();
1154 }
1155 }
1156 }
1157
1158 /**
1159 * Returns the left offset of the slide from the parent container
1160 */
1161 function getSlidePosition(number, side){
1162 if(side == 'left'){
1163 var position = $('.pager', $outerWrapper).eq(number).position().left;
1164 }else if(side == 'top'){
1165 var position = $('.pager', $outerWrapper).eq(number).position().top;
1166 }
1167 return position;
1168 }
1169
1170 /**
1171 * Returns the width of the wrapper
1172 */
1173 function getWrapperWidth(){
1174 var wrapperWidth = $firstChild.outerWidth() * options.displaySlideQty;
1175 return wrapperWidth;
1176 }
1177
1178 /**
1179 * Returns the height of the wrapper
1180 */
1181 function getWrapperHeight(){
1182 // if displaying multiple slides, multiple wrapper width by number of slides to display
1183 var wrapperHeight = $firstChild.outerHeight() * options.displaySlideQty;
1184 return wrapperHeight;
1185 }
1186
1187 /**
1188 * Returns a sample of an arry and loops back on itself if the end of the array is reached
1189 *
1190 * @param array array original array the sample is derived from
1191 * @param int start array index sample will start
1192 * @param int length number of items in the sample
1193 * @param string direction 'forward', 'backward' direction the loop should travel in the array
1194 */
1195 function getArraySample(array, start, length, direction){
1196 // initialize empty array
1197 var sample = [];
1198 // clone the length argument
1199 var loopLength = length;
1200 // determines when the empty array should start being populated
1201 var startPopulatingArray = false;
1202 // reverse the array if direction = 'backward'
1203 if(direction == 'backward'){
1204 array = $.makeArray(array);
1205 array.reverse();
1206 }
1207 // loop through original array until the length argument is met
1208 while(loopLength > 0){
1209 // loop through original array
1210 $.each(array, function(index, val) {
1211 // check if length has been met
1212 if(loopLength > 0){
1213 // don't do anything unless first index has been reached
1214 if(!startPopulatingArray){
1215 // start populating empty array
1216 if(index == start){
1217 startPopulatingArray = true;
1218 // add element to array
1219 sample.push($(this).clone());
1220 // decrease the length clone variable
1221 loopLength--;
1222 }
1223 }else{
1224 // add element to array
1225 sample.push($(this).clone());
1226 // decrease the length clone variable
1227 loopLength--;
1228 }
1229 // if length has been met, break loose
1230 }else{
1231 return false;
1232 }
1233 });
1234 }
1235 return sample;
1236 }
1237
1238 this.each(function(){
1239 // make sure the element has children
1240 if($(this).children().length > 0){
1241 base.initShow();
1242 }
1243 });
1244
1245 return this;
1246 }
1247
1248 jQuery.fx.prototype.cur = function(){
1249 if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
1250 return this.elem[ this.prop ];
1251 }
1252
1253 var r = parseFloat( jQuery.css( this.elem, this.prop ) );
1254 // return r && r > -10000 ? r : 0;
1255 return r;
1256 }
1257
1258
1259 })(jQuery);
1260