Mercurial > public > bravenewsurf

annotate bns_website/static/js/bxslider/source/jquery.bxSlider.js @ 79:548b9e61bd64

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated bands.json to include "asset_prefix" tags for all the bands. Incorporated all the small images from Ferenc into the bands slideshow. Went through and crushed all the large images to fit within 800x600. Make sure to "manage.py loaddata bands.json" after picking this up.
author Chris Ridgway <ckridgway@gmail.com>
date Fri, 25 Nov 2011 16:54:59 -0600
parents 98cc19041d8f
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