Mercurial > public > bravenewsurf

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