bxslider-rails 4.1.0 → 4.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 2d61afa0063f797eba4c74c6d5e4a8678d2a9952
4
+ data.tar.gz: 16a5fa884934624e81b6519fefb11802a1b349f3
5
+ SHA512:
6
+ metadata.gz: bf4bcd3e8a1c125317935017157fc3764d8444cd79ca31636da0ca217f73bb8263aad17fbc53bd15b3e2082ee59e3f3ae5ea7ae33da322798c97793863889d4f
7
+ data.tar.gz: 052d2164522a31d3e5bcabe0940679efcb53364921d9a1d188e550a27963049e80fc9d7e6b5150b62d2290af872e311c3f613f25d6e10268257ae51c62f2d880
data/README.md CHANGED
@@ -1,13 +1,13 @@
1
- # bxSlider Rails Gem - v4.1
1
+ # bxSlider Rails Gem - v4.1.2
2
2
 
3
- jQuery bxSlider v4.1 - http://bxslider.com
3
+ jQuery bxSlider v4.1.2 - http://bxslider.com
4
4
 
5
5
  bxSlider Author: Steven Wanderski, Copyright 2011
6
6
  bxslider-rails Author: Mauricio Natanael Ferreira.
7
7
 
8
8
  ### Extra info
9
9
 
10
- bxSlider 4.1 == bxslider-rails (4.1.0)
10
+ bxSlider 4.1.2 == bxslider-rails (4.1.2)
11
11
 
12
12
  ## Installation
13
13
 
@@ -30,15 +30,17 @@ The bxSlider is a jQuery HTML Content Slider, so please check if you are using t
30
30
  //= require jquery
31
31
 
32
32
  Your app/assets/javascripts/application.js must appear like:
33
- //= require jquery
34
- //= require jquery_ujs
35
- //= require bxslider
36
- //= require_tree .
33
+
34
+ //= require jquery
35
+ //= require jquery_ujs
36
+ //= require bxslider
37
+ //= require_tree .
37
38
 
38
39
  And your app/assets/stylesheets/application.css like this:
39
- *= require_self
40
- *= require bxslider
41
- *= require_tree .
40
+
41
+ *= require_self
42
+ *= require bxslider
43
+ *= require_tree .
42
44
 
43
45
 
44
46
  Basic Structure example from http://bxslider.com
@@ -49,7 +51,14 @@ Basic Structure example from http://bxslider.com
49
51
  <li>Slide three content</li>
50
52
  <li>And so on...</li>
51
53
  </ul>
52
-
54
+
55
+ ### Production environmet setup (Rails 4.0+ only)
56
+
57
+ You have to add images to precompile array manually in your `config/environments/production.rb`
58
+
59
+ # Precompile additional assets.
60
+ # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
61
+ config.assets.precompile += %w( bx_loader.gif controls.png )
53
62
 
54
63
  ## REMEMBER TO INITIALIZE IT!
55
64
 
@@ -1,5 +1,5 @@
1
1
  module Bxslider
2
2
  module Rails
3
- VERSION = "4.1.0"
3
+ VERSION = "4.1.2"
4
4
  end
5
5
  end
@@ -1,1292 +1,1343 @@
1
1
  /**
2
- * BxSlider v4.1 - Fully loaded, responsive content slider
2
+ * BxSlider v4.1.2 - Fully loaded, responsive content slider
3
3
  * http://bxslider.com
4
4
  *
5
- * Copyright 2012, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
5
+ * Copyright 2014, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
6
6
  * Written while drinking Belgian ales and listening to jazz
7
7
  *
8
- * Released under the WTFPL license - http://sam.zoy.org/wtfpl/
8
+ * Released under the MIT license - http://opensource.org/licenses/MIT
9
9
  */
10
10
 
11
11
  ;(function($){
12
12
 
13
- var plugin = {};
14
-
15
- var defaults = {
16
-
17
- // GENERAL
18
- mode: 'horizontal',
19
- slideSelector: '',
20
- infiniteLoop: true,
21
- hideControlOnEnd: false,
22
- speed: 500,
23
- easing: null,
24
- slideMargin: 0,
25
- startSlide: 0,
26
- randomStart: false,
27
- captions: false,
28
- ticker: false,
29
- tickerHover: false,
30
- adaptiveHeight: false,
31
- adaptiveHeightSpeed: 500,
32
- video: false,
33
- useCSS: true,
34
- preloadImages: 'visible',
35
-
36
- // TOUCH
37
- touchEnabled: true,
38
- swipeThreshold: 50,
39
- oneToOneTouch: true,
40
- preventDefaultSwipeX: true,
41
- preventDefaultSwipeY: false,
42
-
43
- // PAGER
44
- pager: true,
45
- pagerType: 'full',
46
- pagerShortSeparator: ' / ',
47
- pagerSelector: null,
48
- buildPager: null,
49
- pagerCustom: null,
50
-
51
- // CONTROLS
52
- controls: true,
53
- nextText: 'Next',
54
- prevText: 'Prev',
55
- nextSelector: null,
56
- prevSelector: null,
57
- autoControls: false,
58
- startText: 'Start',
59
- stopText: 'Stop',
60
- autoControlsCombine: false,
61
- autoControlsSelector: null,
62
-
63
- // AUTO
64
- auto: false,
65
- pause: 4000,
66
- autoStart: true,
67
- autoDirection: 'next',
68
- autoHover: false,
69
- autoDelay: 0,
70
-
71
- // CAROUSEL
72
- minSlides: 1,
73
- maxSlides: 1,
74
- moveSlides: 0,
75
- slideWidth: 0,
76
-
77
- // CALLBACKS
78
- onSliderLoad: function() {},
79
- onSlideBefore: function() {},
80
- onSlideAfter: function() {},
81
- onSlideNext: function() {},
82
- onSlidePrev: function() {}
83
- }
84
-
85
- $.fn.bxSlider = function(options){
86
-
87
- if(this.length == 0) return this;
88
-
89
- // support mutltiple elements
90
- if(this.length > 1){
91
- this.each(function(){$(this).bxSlider(options)});
92
- return this;
93
- }
94
-
95
- // create a namespace to be used throughout the plugin
96
- var slider = {};
97
- // set a reference to our slider element
98
- var el = this;
99
- plugin.el = this;
100
-
101
- /**
102
- * Makes slideshow responsive
103
- */
104
- // first get the original window dimens (thanks alot IE)
105
- var windowWidth = $(window).width();
106
- var windowHeight = $(window).height();
107
-
108
-
109
-
110
- /**
111
- * ===================================================================================
112
- * = PRIVATE FUNCTIONS
113
- * ===================================================================================
114
- */
115
-
116
- /**
117
- * Initializes namespace settings to be used throughout plugin
118
- */
119
- var init = function(){
120
- // merge user-supplied options with the defaults
121
- slider.settings = $.extend({}, defaults, options);
122
- // parse slideWidth setting
123
- slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
124
- // store the original children
125
- slider.children = el.children(slider.settings.slideSelector);
126
- // check if actual number of slides is less than minSlides / maxSlides
127
- if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
128
- if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
129
- // if random start, set the startSlide setting to random number
130
- if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
131
- // store active slide information
132
- slider.active = { index: slider.settings.startSlide }
133
- // store if the slider is in carousel mode (displaying / moving multiple slides)
134
- slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
135
- // if carousel, force preloadImages = 'all'
136
- if(slider.carousel) slider.settings.preloadImages = 'all';
137
- // calculate the min / max width thresholds based on min / max number of slides
138
- // used to setup and update carousel slides dimensions
139
- slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
140
- slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
141
- // store the current state of the slider (if currently animating, working is true)
142
- slider.working = false;
143
- // initialize the controls object
144
- slider.controls = {};
145
- // initialize an auto interval
146
- slider.interval = null;
147
- // determine which property to use for transitions
148
- slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
149
- // determine if hardware acceleration can be used
150
- slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
151
- // create our test div element
152
- var div = document.createElement('div');
153
- // css transition properties
154
- var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
155
- // test for each property
156
- for(var i in props){
157
- if(div.style[props[i]] !== undefined){
158
- slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
159
- slider.animProp = '-' + slider.cssPrefix + '-transform';
160
- return true;
161
- }
162
- }
163
- return false;
164
- }());
165
- // if vertical mode always make maxSlides and minSlides equal
166
- if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
167
- // perform all DOM / CSS modifications
168
- setup();
169
- }
170
-
171
- /**
172
- * Performs all DOM and CSS modifications
173
- */
174
- var setup = function(){
175
- // wrap el in a wrapper
176
- el.wrap('<div class="bx-wrapper"><div class="bx-viewport"></div></div>');
177
- // store a namspace reference to .bx-viewport
178
- slider.viewport = el.parent();
179
- // add a loading div to display while images are loading
180
- slider.loader = $('<div class="bx-loading" />');
181
- slider.viewport.prepend(slider.loader);
182
- // set el to a massive width, to hold any needed slides
183
- // also strip any margin and padding from el
184
- el.css({
185
- width: slider.settings.mode == 'horizontal' ? slider.children.length * 215 + '%' : 'auto',
186
- position: 'relative'
187
- });
188
- // if using CSS, add the easing property
189
- if(slider.usingCSS && slider.settings.easing){
190
- el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
191
- // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
192
- }else if(!slider.settings.easing){
193
- slider.settings.easing = 'swing';
194
- }
195
- var slidesShowing = getNumberSlidesShowing();
196
- // make modifications to the viewport (.bx-viewport)
197
- slider.viewport.css({
198
- width: '100%',
199
- overflow: 'hidden',
200
- position: 'relative'
201
- });
202
- slider.viewport.parent().css({
203
- maxWidth: getViewportMaxWidth()
204
- });
205
- // apply css to all slider children
206
- slider.children.css({
207
- 'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
208
- listStyle: 'none',
209
- position: 'relative'
210
- });
211
- // apply the calculated width after the float is applied to prevent scrollbar interference
212
- slider.children.width(getSlideWidth());
213
- // if slideMargin is supplied, add the css
214
- if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
215
- if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
216
- // if "fade" mode, add positioning and z-index CSS
217
- if(slider.settings.mode == 'fade'){
218
- slider.children.css({
219
- position: 'absolute',
220
- zIndex: 0,
221
- display: 'none'
222
- });
223
- // prepare the z-index on the showing element
224
- slider.children.eq(slider.settings.startSlide).css({zIndex: 50, display: 'block'});
225
- }
226
- // create an element to contain all slider controls (pager, start / stop, etc)
227
- slider.controls.el = $('<div class="bx-controls" />');
228
- // if captions are requested, add them
229
- if(slider.settings.captions) appendCaptions();
230
- // if infinite loop, prepare additional slides
231
- if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
232
- var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
233
- var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
234
- var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
235
- el.append(sliceAppend).prepend(slicePrepend);
236
- }
237
- // check if startSlide is last slide
238
- slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
239
- // if video is true, set up the fitVids plugin
240
- if(slider.settings.video) el.fitVids();
241
- // set the default preload selector (visible)
242
- var preloadSelector = slider.children.eq(slider.settings.startSlide);
243
- if (slider.settings.preloadImages == "all") preloadSelector = el.children();
244
- // only check for control addition if not in "ticker" mode
245
- if(!slider.settings.ticker){
246
- // if pager is requested, add it
247
- if(slider.settings.pager) appendPager();
248
- // if controls are requested, add them
249
- if(slider.settings.controls) appendControls();
250
- // if auto is true, and auto controls are requested, add them
251
- if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
252
- // if any control option is requested, add the controls wrapper
253
- if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
254
- // if ticker mode, do not allow a pager
255
- }else{
256
- slider.settings.pager = false;
257
- }
258
- // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
259
- preloadSelector.imagesLoaded(start);
260
- }
261
-
262
- /**
263
- * Start the slider
264
- */
265
- var start = function(){
266
- // remove the loading DOM element
267
- slider.loader.remove();
268
- // set the left / top position of "el"
269
- setSlidePosition();
270
- // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
271
- if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
272
- // set the viewport height
273
- slider.viewport.height(getViewportHeight());
274
- // make sure everything is positioned just right (same as a window resize)
275
- el.redrawSlider();
276
- // onSliderLoad callback
277
- slider.settings.onSliderLoad(slider.active.index);
278
- // slider has been fully initialized
279
- slider.initialized = true;
280
- // bind the resize call to the window
281
- $(window).bind('resize', resizeWindow);
282
- // if auto is true, start the show
283
- if (slider.settings.auto && slider.settings.autoStart) initAuto();
284
- // if ticker is true, start the ticker
285
- if (slider.settings.ticker) initTicker();
286
- // if pager is requested, make the appropriate pager link active
287
- if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
288
- // check for any updates to the controls (like hideControlOnEnd updates)
289
- if (slider.settings.controls) updateDirectionControls();
290
- // if touchEnabled is true, setup the touch events
291
- if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
292
- }
293
-
294
- /**
295
- * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
296
- */
297
- var getViewportHeight = function(){
298
- var height = 0;
299
- // first determine which children (slides) should be used in our height calculation
300
- var children = $();
301
- // if mode is not "vertical" and adaptiveHeight is false, include all children
302
- if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
303
- children = slider.children;
304
- }else{
305
- // if not carousel, return the single active child
306
- if(!slider.carousel){
307
- children = slider.children.eq(slider.active.index);
308
- // if carousel, return a slice of children
309
- }else{
310
- // get the individual slide index
311
- var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
312
- // add the current slide to the children
313
- children = slider.children.eq(currentIndex);
314
- // cycle through the remaining "showing" slides
315
- for (i = 1; i <= slider.settings.maxSlides - 1; i++){
316
- // if looped back to the start
317
- if(currentIndex + i >= slider.children.length){
318
- children = children.add(slider.children.eq(i - 1));
319
- }else{
320
- children = children.add(slider.children.eq(currentIndex + i));
321
- }
322
- }
323
- }
324
- }
325
- // if "vertical" mode, calculate the sum of the heights of the children
326
- if(slider.settings.mode == 'vertical'){
327
- children.each(function(index) {
328
- height += $(this).outerHeight();
329
- });
330
- // add user-supplied margins
331
- if(slider.settings.slideMargin > 0){
332
- height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
333
- }
334
- // if not "vertical" mode, calculate the max height of the children
335
- }else{
336
- height = Math.max.apply(Math, children.map(function(){
337
- return $(this).outerHeight(false);
338
- }).get());
339
- }
340
- return height;
341
- }
342
-
343
- /**
344
- * Returns the calculated width to be used for the outer wrapper / viewport
345
- */
346
- var getViewportMaxWidth = function(){
347
- var width = '100%';
348
- if(slider.settings.slideWidth > 0){
349
- if(slider.settings.mode == 'horizontal'){
350
- width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
351
- }else{
352
- width = slider.settings.slideWidth;
353
- }
354
- }
355
- return width;
356
- }
357
-
358
- /**
359
- * Returns the calculated width to be applied to each slide
360
- */
361
- var getSlideWidth = function(){
362
- // start with any user-supplied slide width
363
- var newElWidth = slider.settings.slideWidth;
364
- // get the current viewport width
365
- var wrapWidth = slider.viewport.width();
366
- // if slide width was not supplied, or is larger than the viewport use the viewport width
367
- if(slider.settings.slideWidth == 0 ||
368
- (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
369
- slider.settings.mode == 'vertical'){
370
- newElWidth = wrapWidth;
371
- // if carousel, use the thresholds to determine the width
372
- }else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
373
- if(wrapWidth > slider.maxThreshold){
374
- // newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
375
- }else if(wrapWidth < slider.minThreshold){
376
- newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
377
- }
378
- }
379
- return newElWidth;
380
- }
381
-
382
- /**
383
- * Returns the number of slides currently visible in the viewport (includes partially visible slides)
384
- */
385
- var getNumberSlidesShowing = function(){
386
- var slidesShowing = 1;
387
- if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
388
- // if viewport is smaller than minThreshold, return minSlides
389
- if(slider.viewport.width() < slider.minThreshold){
390
- slidesShowing = slider.settings.minSlides;
391
- // if viewport is larger than minThreshold, return maxSlides
392
- }else if(slider.viewport.width() > slider.maxThreshold){
393
- slidesShowing = slider.settings.maxSlides;
394
- // if viewport is between min / max thresholds, divide viewport width by first child width
395
- }else{
396
- var childWidth = slider.children.first().width();
397
- slidesShowing = Math.floor(slider.viewport.width() / childWidth);
398
- }
399
- // if "vertical" mode, slides showing will always be minSlides
400
- }else if(slider.settings.mode == 'vertical'){
401
- slidesShowing = slider.settings.minSlides;
402
- }
403
- return slidesShowing;
404
- }
405
-
406
- /**
407
- * Returns the number of pages (one full viewport of slides is one "page")
408
- */
409
- var getPagerQty = function(){
410
- var pagerQty = 0;
411
- // if moveSlides is specified by the user
412
- if(slider.settings.moveSlides > 0){
413
- if(slider.settings.infiniteLoop){
414
- pagerQty = slider.children.length / getMoveBy();
415
- }else{
416
- // use a while loop to determine pages
417
- var breakPoint = 0;
418
- var counter = 0
419
- // when breakpoint goes above children length, counter is the number of pages
420
- while (breakPoint < slider.children.length){
421
- ++pagerQty;
422
- breakPoint = counter + getNumberSlidesShowing();
423
- counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
424
- }
425
- }
426
- // if moveSlides is 0 (auto) divide children length by sides showing, then round up
427
- }else{
428
- pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
429
- }
430
- return pagerQty;
431
- }
432
-
433
- /**
434
- * Returns the number of indivual slides by which to shift the slider
435
- */
436
- var getMoveBy = function(){
437
- // if moveSlides was set by the user and moveSlides is less than number of slides showing
438
- if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
439
- return slider.settings.moveSlides;
440
- }
441
- // if moveSlides is 0 (auto)
442
- return getNumberSlidesShowing();
443
- }
444
-
445
- /**
446
- * Sets the slider's (el) left or top position
447
- */
448
- var setSlidePosition = function(){
449
- // if last slide, not infinite loop, and number of children is larger than specified maxSlides
450
- if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
451
- if (slider.settings.mode == 'horizontal'){
452
- // get the last child's position
453
- var lastChild = slider.children.last();
454
- var position = lastChild.position();
455
- // set the left position
456
- setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.width())), 'reset', 0);
457
- }else if(slider.settings.mode == 'vertical'){
458
- // get the last showing index's position
459
- var lastShowingIndex = slider.children.length - slider.settings.minSlides;
460
- var position = slider.children.eq(lastShowingIndex).position();
461
- // set the top position
462
- setPositionProperty(-position.top, 'reset', 0);
463
- }
464
- // if not last slide
465
- }else{
466
- // get the position of the first showing slide
467
- var position = slider.children.eq(slider.active.index * getMoveBy()).position();
468
- // check for last slide
469
- if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
470
- // set the repective position
471
- if (position != undefined){
472
- if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
473
- else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
474
- }
475
- }
476
- }
477
-
478
- /**
479
- * Sets the el's animating property position (which in turn will sometimes animate el).
480
- * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
481
- *
482
- * @param value (int)
483
- * - the animating property's value
484
- *
485
- * @param type (string) 'slider', 'reset', 'ticker'
486
- * - the type of instance for which the function is being
487
- *
488
- * @param duration (int)
489
- * - the amount of time (in ms) the transition should occupy
490
- *
491
- * @param params (array) optional
492
- * - an optional parameter containing any variables that need to be passed in
493
- */
494
- var setPositionProperty = function(value, type, duration, params){
495
- // use CSS transform
496
- if(slider.usingCSS){
497
- // determine the translate3d value
498
- var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
499
- // add the CSS transition-duration
500
- el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
501
- if(type == 'slide'){
502
- // set the property value
503
- el.css(slider.animProp, propValue);
504
- // bind a callback method - executes when CSS transition completes
505
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
506
- // unbind the callback
507
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
508
- updateAfterSlideTransition();
509
- });
510
- }else if(type == 'reset'){
511
- el.css(slider.animProp, propValue);
512
- }else if(type == 'ticker'){
513
- // make the transition use 'linear'
514
- el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
515
- el.css(slider.animProp, propValue);
516
- // bind a callback method - executes when CSS transition completes
517
- el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
518
- // unbind the callback
519
- el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
520
- // reset the position
521
- setPositionProperty(params['resetValue'], 'reset', 0);
522
- // start the loop again
523
- tickerLoop();
524
- });
525
- }
526
- // use JS animate
527
- }else{
528
- var animateObj = {};
529
- animateObj[slider.animProp] = value;
530
- if(type == 'slide'){
531
- el.animate(animateObj, duration, slider.settings.easing, function(){
532
- updateAfterSlideTransition();
533
- });
534
- }else if(type == 'reset'){
535
- el.css(slider.animProp, value)
536
- }else if(type == 'ticker'){
537
- el.animate(animateObj, speed, 'linear', function(){
538
- setPositionProperty(params['resetValue'], 'reset', 0);
539
- // run the recursive loop after animation
540
- tickerLoop();
541
- });
542
- }
543
- }
544
- }
545
-
546
- /**
547
- * Populates the pager with proper amount of pages
548
- */
549
- var populatePager = function(){
550
- var pagerHtml = '';
551
- var pagerQty = getPagerQty();
552
- // loop through each pager item
553
- for(var i=0; i < pagerQty; i++){
554
- var linkContent = '';
555
- // if a buildPager function is supplied, use it to get pager link value, else use index + 1
556
- if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
557
- linkContent = slider.settings.buildPager(i);
558
- slider.pagerEl.addClass('bx-custom-pager');
559
- }else{
560
- linkContent = i + 1;
561
- slider.pagerEl.addClass('bx-default-pager');
562
- }
563
- // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
564
- // add the markup to the string
565
- pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
566
- };
567
- // populate the pager element with pager links
568
- slider.pagerEl.html(pagerHtml);
569
- }
570
-
571
- /**
572
- * Appends the pager to the controls element
573
- */
574
- var appendPager = function(){
575
- if(!slider.settings.pagerCustom){
576
- // create the pager DOM element
577
- slider.pagerEl = $('<div class="bx-pager" />');
578
- // if a pager selector was supplied, populate it with the pager
579
- if(slider.settings.pagerSelector){
580
- $(slider.settings.pagerSelector).html(slider.pagerEl);
581
- // if no pager selector was supplied, add it after the wrapper
582
- }else{
583
- slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
584
- }
585
- // populate the pager
586
- populatePager();
587
- }else{
588
- slider.pagerEl = $(slider.settings.pagerCustom);
589
- }
590
- // assign the pager click binding
591
- slider.pagerEl.delegate('a', 'click', clickPagerBind);
592
- }
593
-
594
- /**
595
- * Appends prev / next controls to the controls element
596
- */
597
- var appendControls = function(){
598
- slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
599
- slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
600
- // bind click actions to the controls
601
- slider.controls.next.bind('click', clickNextBind);
602
- slider.controls.prev.bind('click', clickPrevBind);
603
- // if nextSlector was supplied, populate it
604
- if(slider.settings.nextSelector){
605
- $(slider.settings.nextSelector).append(slider.controls.next);
606
- }
607
- // if prevSlector was supplied, populate it
608
- if(slider.settings.prevSelector){
609
- $(slider.settings.prevSelector).append(slider.controls.prev);
610
- }
611
- // if no custom selectors were supplied
612
- if(!slider.settings.nextSelector && !slider.settings.prevSelector){
613
- // add the controls to the DOM
614
- slider.controls.directionEl = $('<div class="bx-controls-direction" />');
615
- // add the control elements to the directionEl
616
- slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
617
- // slider.viewport.append(slider.controls.directionEl);
618
- slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
619
- }
620
- }
621
-
622
- /**
623
- * Appends start / stop auto controls to the controls element
624
- */
625
- var appendControlsAuto = function(){
626
- slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
627
- slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
628
- // add the controls to the DOM
629
- slider.controls.autoEl = $('<div class="bx-controls-auto" />');
630
- // bind click actions to the controls
631
- slider.controls.autoEl.delegate('.bx-start', 'click', clickStartBind);
632
- slider.controls.autoEl.delegate('.bx-stop', 'click', clickStopBind);
633
- // if autoControlsCombine, insert only the "start" control
634
- if(slider.settings.autoControlsCombine){
635
- slider.controls.autoEl.append(slider.controls.start);
636
- // if autoControlsCombine is false, insert both controls
637
- }else{
638
- slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
639
- }
640
- // if auto controls selector was supplied, populate it with the controls
641
- if(slider.settings.autoControlsSelector){
642
- $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
643
- // if auto controls selector was not supplied, add it after the wrapper
644
- }else{
645
- slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
646
- }
647
- // update the auto controls
648
- updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
649
- }
650
-
651
- /**
652
- * Appends image captions to the DOM
653
- */
654
- var appendCaptions = function(){
655
- // cycle through each child
656
- slider.children.each(function(index){
657
- // get the image title attribute
658
- var title = $(this).find('img:first').attr('title');
659
- // append the caption
660
- if (title != undefined) $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
661
- });
662
- }
663
-
664
- /**
665
- * Click next binding
666
- *
667
- * @param e (event)
668
- * - DOM event object
669
- */
670
- var clickNextBind = function(e){
671
- // if auto show is running, stop it
672
- if (slider.settings.auto) el.stopAuto();
673
- el.goToNextSlide();
674
- e.preventDefault();
675
- }
676
-
677
- /**
678
- * Click prev binding
679
- *
680
- * @param e (event)
681
- * - DOM event object
682
- */
683
- var clickPrevBind = function(e){
684
- // if auto show is running, stop it
685
- if (slider.settings.auto) el.stopAuto();
686
- el.goToPrevSlide();
687
- e.preventDefault();
688
- }
689
-
690
- /**
691
- * Click start binding
692
- *
693
- * @param e (event)
694
- * - DOM event object
695
- */
696
- var clickStartBind = function(e){
697
- el.startAuto();
698
- e.preventDefault();
699
- }
700
-
701
- /**
702
- * Click stop binding
703
- *
704
- * @param e (event)
705
- * - DOM event object
706
- */
707
- var clickStopBind = function(e){
708
- el.stopAuto();
709
- e.preventDefault();
710
- }
711
-
712
- /**
713
- * Click pager binding
714
- *
715
- * @param e (event)
716
- * - DOM event object
717
- */
718
- var clickPagerBind = function(e){
719
- // if auto show is running, stop it
720
- if (slider.settings.auto) el.stopAuto();
721
- var pagerLink = $(e.currentTarget);
722
- var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
723
- // if clicked pager link is not active, continue with the goToSlide call
724
- if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
725
- e.preventDefault();
726
- }
727
-
728
- /**
729
- * Updates the pager links with an active class
730
- *
731
- * @param slideIndex (int)
732
- * - index of slide to make active
733
- */
734
- var updatePagerActive = function(slideIndex){
735
- // if "short" pager type
736
- if(slider.settings.pagerType == 'short'){
737
- slider.pagerEl.html((slideIndex + 1) + slider.settings.pagerShortSeparator + slider.children.length);
738
- return;
739
- }
740
- // remove all pager active classes
741
- slider.pagerEl.find('a').removeClass('active');
742
- // apply the active class for all pagers
743
- slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
744
- }
745
-
746
- /**
747
- * Performs needed actions after a slide transition
748
- */
749
- var updateAfterSlideTransition = function(){
750
- // if infinte loop is true
751
- if(slider.settings.infiniteLoop){
752
- var position = '';
753
- // first slide
754
- if(slider.active.index == 0){
755
- // set the new position
756
- position = slider.children.eq(0).position();
757
- // carousel, last slide
758
- }else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
759
- position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
760
- // last slide
761
- }else if(slider.active.index == slider.children.length - 1){
762
- position = slider.children.eq(slider.children.length - 1).position();
763
- }
764
- if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0);; }
765
- else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0);; }
766
- }
767
- // declare that the transition is complete
768
- slider.working = false;
769
- // onSlideAfter callback
770
- slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
771
- }
772
-
773
- /**
774
- * Updates the auto controls state (either active, or combined switch)
775
- *
776
- * @param state (string) "start", "stop"
777
- * - the new state of the auto show
778
- */
779
- var updateAutoControls = function(state){
780
- // if autoControlsCombine is true, replace the current control with the new state
781
- if(slider.settings.autoControlsCombine){
782
- slider.controls.autoEl.html(slider.controls[state]);
783
- // if autoControlsCombine is false, apply the "active" class to the appropriate control
784
- }else{
785
- slider.controls.autoEl.find('a').removeClass('active');
786
- slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
787
- }
788
- }
789
-
790
- /**
791
- * Updates the direction controls (checks if either should be hidden)
792
- */
793
- var updateDirectionControls = function(){
794
- if(getPagerQty() == 1){
795
- slider.controls.prev.addClass('disabled');
796
- slider.controls.next.addClass('disabled');
797
- }else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
798
- // if first slide
799
- if (slider.active.index == 0){
800
- slider.controls.prev.addClass('disabled');
801
- slider.controls.next.removeClass('disabled');
802
- // if last slide
803
- }else if(slider.active.index == getPagerQty() - 1){
804
- slider.controls.next.addClass('disabled');
805
- slider.controls.prev.removeClass('disabled');
806
- // if any slide in the middle
807
- }else{
808
- slider.controls.prev.removeClass('disabled');
809
- slider.controls.next.removeClass('disabled');
810
- }
811
- }
812
- }
813
-
814
- /**
815
- * Initialzes the auto process
816
- */
817
- var initAuto = function(){
818
- // if autoDelay was supplied, launch the auto show using a setTimeout() call
819
- if(slider.settings.autoDelay > 0){
820
- var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
821
- // if autoDelay was not supplied, start the auto show normally
822
- }else{
823
- el.startAuto();
824
- }
825
- // if autoHover is requested
826
- if(slider.settings.autoHover){
827
- // on el hover
828
- el.hover(function(){
829
- // if the auto show is currently playing (has an active interval)
830
- if(slider.interval){
831
- // stop the auto show and pass true agument which will prevent control update
832
- el.stopAuto(true);
833
- // create a new autoPaused value which will be used by the relative "mouseout" event
834
- slider.autoPaused = true;
835
- }
836
- }, function(){
837
- // if the autoPaused value was created be the prior "mouseover" event
838
- if(slider.autoPaused){
839
- // start the auto show and pass true agument which will prevent control update
840
- el.startAuto(true);
841
- // reset the autoPaused value
842
- slider.autoPaused = null;
843
- }
844
- });
845
- }
846
- }
847
-
848
- /**
849
- * Initialzes the ticker process
850
- */
851
- var initTicker = function(){
852
- var startPosition = 0;
853
- // if autoDirection is "next", append a clone of the entire slider
854
- if(slider.settings.autoDirection == 'next'){
855
- el.append(slider.children.clone().addClass('bx-clone'));
856
- // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
857
- }else{
858
- el.prepend(slider.children.clone().addClass('bx-clone'));
859
- var position = slider.children.first().position();
860
- startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
861
- }
862
- setPositionProperty(startPosition, 'reset', 0);
863
- // do not allow controls in ticker mode
864
- slider.settings.pager = false;
865
- slider.settings.controls = false;
866
- slider.settings.autoControls = false;
867
- // if autoHover is requested
868
- if(slider.settings.tickerHover && !slider.usingCSS){
869
- // on el hover
870
- slider.viewport.hover(function(){
871
- el.stop();
872
- }, function(){
873
- // calculate the total width of children (used to calculate the speed ratio)
874
- var totalDimens = 0;
875
- slider.children.each(function(index){
876
- totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
877
- });
878
- // calculate the speed ratio (used to determine the new speed to finish the paused animation)
879
- var ratio = slider.settings.speed / totalDimens;
880
- // determine which property to use
881
- var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
882
- // calculate the new speed
883
- var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
884
- tickerLoop(newSpeed);
885
- });
886
- }
887
- // start the ticker loop
888
- tickerLoop();
889
- }
890
-
891
- /**
892
- * Runs a continuous loop, news ticker-style
893
- */
894
- var tickerLoop = function(resumeSpeed){
895
- speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
896
- var position = {left: 0, top: 0};
897
- var reset = {left: 0, top: 0};
898
- // if "next" animate left position to last child, then reset left to 0
899
- if(slider.settings.autoDirection == 'next'){
900
- position = el.find('.bx-clone').first().position();
901
- // if "prev" animate left position to 0, then reset left to first non-clone child
902
- }else{
903
- reset = slider.children.first().position();
904
- }
905
- var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
906
- var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
907
- var params = {resetValue: resetValue};
908
- setPositionProperty(animateProperty, 'ticker', speed, params);
909
- }
910
-
911
- /**
912
- * Initializes touch events
913
- */
914
- var initTouch = function(){
915
- // initialize object to contain all touch values
916
- slider.touch = {
917
- start: {x: 0, y: 0},
918
- end: {x: 0, y: 0}
919
- }
920
- slider.viewport.bind('touchstart', onTouchStart);
921
- }
922
-
923
- /**
924
- * Event handler for "touchstart"
925
- *
926
- * @param e (event)
927
- * - DOM event object
928
- */
929
- var onTouchStart = function(e){
930
- if(slider.working){
931
- e.preventDefault();
932
- }else{
933
- // record the original position when touch starts
934
- slider.touch.originalPos = el.position();
935
- var orig = e.originalEvent;
936
- // record the starting touch x, y coordinates
937
- slider.touch.start.x = orig.changedTouches[0].pageX;
938
- slider.touch.start.y = orig.changedTouches[0].pageY;
939
- // bind a "touchmove" event to the viewport
940
- slider.viewport.bind('touchmove', onTouchMove);
941
- // bind a "touchend" event to the viewport
942
- slider.viewport.bind('touchend', onTouchEnd);
943
- }
944
- }
945
-
946
- /**
947
- * Event handler for "touchmove"
948
- *
949
- * @param e (event)
950
- * - DOM event object
951
- */
952
- var onTouchMove = function(e){
953
- var orig = e.originalEvent;
954
- // if scrolling on y axis, do not prevent default
955
- var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
956
- var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
957
- // x axis swipe
958
- if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
959
- e.preventDefault();
960
- // y axis swipe
961
- }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
962
- e.preventDefault();
963
- }
964
- if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
965
- var value = 0;
966
- // if horizontal, drag along x axis
967
- if(slider.settings.mode == 'horizontal'){
968
- var change = orig.changedTouches[0].pageX - slider.touch.start.x;
969
- value = slider.touch.originalPos.left + change;
970
- // if vertical, drag along y axis
971
- }else{
972
- var change = orig.changedTouches[0].pageY - slider.touch.start.y;
973
- value = slider.touch.originalPos.top + change;
974
- }
975
- setPositionProperty(value, 'reset', 0);
976
- }
977
- }
978
-
979
- /**
980
- * Event handler for "touchend"
981
- *
982
- * @param e (event)
983
- * - DOM event object
984
- */
985
- var onTouchEnd = function(e){
986
- slider.viewport.unbind('touchmove', onTouchMove);
987
- var orig = e.originalEvent;
988
- var value = 0;
989
- // record end x, y positions
990
- slider.touch.end.x = orig.changedTouches[0].pageX;
991
- slider.touch.end.y = orig.changedTouches[0].pageY;
992
- // if fade mode, check if absolute x distance clears the threshold
993
- if(slider.settings.mode == 'fade'){
994
- var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
995
- if(distance >= slider.settings.swipeThreshold){
996
- slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
997
- el.stopAuto();
998
- }
999
- // not fade mode
1000
- }else{
1001
- var distance = 0;
1002
- // calculate distance and el's animate property
1003
- if(slider.settings.mode == 'horizontal'){
1004
- distance = slider.touch.end.x - slider.touch.start.x;
1005
- value = slider.touch.originalPos.left;
1006
- }else{
1007
- distance = slider.touch.end.y - slider.touch.start.y;
1008
- value = slider.touch.originalPos.top;
1009
- }
1010
- // if not infinite loop and first / last slide, do not attempt a slide transition
1011
- if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
1012
- setPositionProperty(value, 'reset', 200);
1013
- }else{
1014
- // check if distance clears threshold
1015
- if(Math.abs(distance) >= slider.settings.swipeThreshold){
1016
- distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
1017
- el.stopAuto();
1018
- }else{
1019
- // el.animate(property, 200);
1020
- setPositionProperty(value, 'reset', 200);
1021
- }
1022
- }
1023
- }
1024
- slider.viewport.unbind('touchend', onTouchEnd);
1025
- }
1026
-
1027
- /**
1028
- * Window resize event callback
1029
- */
1030
- var resizeWindow = function(e){
1031
- // get the new window dimens (again, thank you IE)
1032
- var windowWidthNew = $(window).width();
1033
- var windowHeightNew = $(window).height();
1034
- // make sure that it is a true window resize
1035
- // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
1036
- // are resized. Can you just die already?*
1037
- if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
1038
- // set the new window dimens
1039
- windowWidth = windowWidthNew;
1040
- windowHeight = windowHeightNew;
1041
- // update all dynamic elements
1042
- el.redrawSlider();
1043
- }
1044
- }
1045
-
1046
- /**
1047
- * ===================================================================================
1048
- * = PUBLIC FUNCTIONS
1049
- * ===================================================================================
1050
- */
1051
-
1052
- /**
1053
- * Performs slide transition to the specified slide
1054
- *
1055
- * @param slideIndex (int)
1056
- * - the destination slide's index (zero-based)
1057
- *
1058
- * @param direction (string)
1059
- * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
1060
- */
1061
- el.goToSlide = function(slideIndex, direction){
1062
- // if plugin is currently in motion, ignore request
1063
- if(slider.working || slider.active.index == slideIndex) return;
1064
- // declare that plugin is in motion
1065
- slider.working = true;
1066
- // store the old index
1067
- slider.oldIndex = slider.active.index;
1068
- // if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
1069
- if(slideIndex < 0){
1070
- slider.active.index = getPagerQty() - 1;
1071
- // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
1072
- }else if(slideIndex >= getPagerQty()){
1073
- slider.active.index = 0;
1074
- // set active index to requested slide
1075
- }else{
1076
- slider.active.index = slideIndex;
1077
- }
1078
- // onSlideBefore, onSlideNext, onSlidePrev callbacks
1079
- slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1080
- if(direction == 'next'){
1081
- slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1082
- }else if(direction == 'prev'){
1083
- slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1084
- }
1085
- // check if last slide
1086
- slider.active.last = slider.active.index >= getPagerQty() - 1;
1087
- // update the pager with active class
1088
- if(slider.settings.pager) updatePagerActive(slider.active.index);
1089
- // // check for direction control update
1090
- if(slider.settings.controls) updateDirectionControls();
1091
- // if slider is set to mode: "fade"
1092
- if(slider.settings.mode == 'fade'){
1093
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
1094
- if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1095
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1096
- }
1097
- // fade out the visible child and reset its z-index value
1098
- slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
1099
- // fade in the newly requested slide
1100
- slider.children.eq(slider.active.index).css('zIndex', 51).fadeIn(slider.settings.speed, function(){
1101
- $(this).css('zIndex', 50);
1102
- updateAfterSlideTransition();
1103
- });
1104
- // slider mode is not "fade"
1105
- }else{
1106
- // if adaptiveHeight is true and next height is different from current height, animate to the new height
1107
- if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1108
- slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1109
- }
1110
- var moveBy = 0;
1111
- var position = {left: 0, top: 0};
1112
- // if carousel and not infinite loop
1113
- if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
1114
- if(slider.settings.mode == 'horizontal'){
1115
- // get the last child position
1116
- var lastChild = slider.children.eq(slider.children.length - 1);
1117
- position = lastChild.position();
1118
- // calculate the position of the last slide
1119
- moveBy = slider.viewport.width() - lastChild.width();
1120
- }else{
1121
- // get last showing index position
1122
- var lastShowingIndex = slider.children.length - slider.settings.minSlides;
1123
- position = slider.children.eq(lastShowingIndex).position();
1124
- }
1125
- // horizontal carousel, going previous while on first slide (infiniteLoop mode)
1126
- }else if(slider.carousel && slider.active.last && direction == 'prev'){
1127
- // get the last child position
1128
- var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
1129
- var lastChild = el.children('.bx-clone').eq(eq);
1130
- position = lastChild.position();
1131
- // if infinite loop and "Next" is clicked on the last slide
1132
- }else if(direction == 'next' && slider.active.index == 0){
1133
- // get the last clone position
1134
- position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
1135
- slider.active.last = false;
1136
- // normal non-zero requests
1137
- }else if(slideIndex >= 0){
1138
- var requestEl = slideIndex * getMoveBy();
1139
- position = slider.children.eq(requestEl).position();
1140
- }
1141
-
1142
- /* If the position doesn't exist
1143
- * (e.g. if you destroy the slider on a next click),
1144
- * it doesn't throw an error.
1145
- */
1146
- if ("undefined" !== typeof(position)) {
1147
- var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
1148
- // plugin values to be animated
1149
- setPositionProperty(value, 'slide', slider.settings.speed);
1150
- }
1151
- }
1152
- }
1153
-
1154
- /**
1155
- * Transitions to the next slide in the show
1156
- */
1157
- el.goToNextSlide = function(){
1158
- // if infiniteLoop is false and last page is showing, disregard call
1159
- if (!slider.settings.infiniteLoop && slider.active.last) return;
1160
- var pagerIndex = parseInt(slider.active.index) + 1;
1161
- el.goToSlide(pagerIndex, 'next');
1162
- }
1163
-
1164
- /**
1165
- * Transitions to the prev slide in the show
1166
- */
1167
- el.goToPrevSlide = function(){
1168
- // if infiniteLoop is false and last page is showing, disregard call
1169
- if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
1170
- var pagerIndex = parseInt(slider.active.index) - 1;
1171
- el.goToSlide(pagerIndex, 'prev');
1172
- }
1173
-
1174
- /**
1175
- * Starts the auto show
1176
- *
1177
- * @param preventControlUpdate (boolean)
1178
- * - if true, auto controls state will not be updated
1179
- */
1180
- el.startAuto = function(preventControlUpdate){
1181
- // if an interval already exists, disregard call
1182
- if(slider.interval) return;
1183
- // create an interval
1184
- slider.interval = setInterval(function(){
1185
- slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
1186
- }, slider.settings.pause);
1187
- // if auto controls are displayed and preventControlUpdate is not true
1188
- if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
1189
- }
1190
-
1191
- /**
1192
- * Stops the auto show
1193
- *
1194
- * @param preventControlUpdate (boolean)
1195
- * - if true, auto controls state will not be updated
1196
- */
1197
- el.stopAuto = function(preventControlUpdate){
1198
- // if no interval exists, disregard call
1199
- if(!slider.interval) return;
1200
- // clear the interval
1201
- clearInterval(slider.interval);
1202
- slider.interval = null;
1203
- // if auto controls are displayed and preventControlUpdate is not true
1204
- if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
1205
- }
1206
-
1207
- /**
1208
- * Returns current slide index (zero-based)
1209
- */
1210
- el.getCurrentSlide = function(){
1211
- return slider.active.index;
1212
- }
1213
-
1214
- /**
1215
- * Returns number of slides in show
1216
- */
1217
- el.getSlideCount = function(){
1218
- return slider.children.length;
1219
- }
1220
-
1221
- /**
1222
- * Update all dynamic slider elements
1223
- */
1224
- el.redrawSlider = function(){
1225
- // resize all children in ratio to new screen size
1226
- slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
1227
- // adjust the height
1228
- slider.viewport.css('height', getViewportHeight());
1229
- // update the slide position
1230
- if(!slider.settings.ticker) setSlidePosition();
1231
- // if active.last was true before the screen resize, we want
1232
- // to keep it last no matter what screen size we end on
1233
- if (slider.active.last) slider.active.index = getPagerQty() - 1;
1234
- // if the active index (page) no longer exists due to the resize, simply set the index as last
1235
- if (slider.active.index >= getPagerQty()) slider.active.last = true;
1236
- // if a pager is being displayed and a custom pager is not being used, update it
1237
- if(slider.settings.pager && !slider.settings.pagerCustom){
1238
- populatePager();
1239
- updatePagerActive(slider.active.index);
1240
- }
1241
- }
1242
-
1243
- /**
1244
- * Destroy the current instance of the slider (revert everything back to original state)
1245
- */
1246
- el.destroySlider = function(){
1247
- // don't do anything if slider has already been destroyed
1248
- if(!slider.initialized) return;
1249
- slider.initialized = false;
1250
- $('.bx-clone', this).remove();
1251
- slider.children.removeAttr('style');
1252
- this.removeAttr('style').unwrap().unwrap();
1253
- if(slider.controls.el) slider.controls.el.remove();
1254
- if(slider.controls.next) slider.controls.next.remove();
1255
- if(slider.controls.prev) slider.controls.prev.remove();
1256
- if(slider.pagerEl) slider.pagerEl.remove();
1257
- $('.bx-caption', this).remove();
1258
- if(slider.controls.autoEl) slider.controls.autoEl.remove();
1259
- clearInterval(slider.interval);
1260
- $(window).unbind('resize', resizeWindow);
1261
- }
1262
-
1263
- /**
1264
- * Reload the slider (revert all DOM changes, and re-initialize)
1265
- */
1266
- el.reloadSlider = function(settings){
1267
- if (settings != undefined) options = settings;
1268
- el.destroySlider();
1269
- init();
1270
- }
1271
-
1272
- init();
1273
-
1274
- // returns the current jQuery object
1275
- return this;
1276
- }
13
+ var plugin = {};
1277
14
 
1278
- })(jQuery);
15
+ var defaults = {
1279
16
 
1280
- /*!
1281
- * jQuery imagesLoaded plugin v2.1.0
1282
- * http://github.com/desandro/imagesloaded
1283
- *
1284
- * MIT License. by Paul Irish et al.
1285
- */
17
+ // GENERAL
18
+ mode: 'horizontal',
19
+ slideSelector: '',
20
+ infiniteLoop: true,
21
+ hideControlOnEnd: false,
22
+ speed: 500,
23
+ easing: null,
24
+ slideMargin: 0,
25
+ startSlide: 0,
26
+ randomStart: false,
27
+ captions: false,
28
+ ticker: false,
29
+ tickerHover: false,
30
+ adaptiveHeight: false,
31
+ adaptiveHeightSpeed: 500,
32
+ video: false,
33
+ useCSS: true,
34
+ preloadImages: 'visible',
35
+ responsive: true,
36
+ slideZIndex: 50,
37
+ wrapperClass: 'bx-wrapper',
38
+
39
+ // TOUCH
40
+ touchEnabled: true,
41
+ swipeThreshold: 50,
42
+ oneToOneTouch: true,
43
+ preventDefaultSwipeX: true,
44
+ preventDefaultSwipeY: false,
45
+
46
+ // PAGER
47
+ pager: true,
48
+ pagerType: 'full',
49
+ pagerShortSeparator: ' / ',
50
+ pagerSelector: null,
51
+ buildPager: null,
52
+ pagerCustom: null,
53
+
54
+ // CONTROLS
55
+ controls: true,
56
+ nextText: 'Next',
57
+ prevText: 'Prev',
58
+ nextSelector: null,
59
+ prevSelector: null,
60
+ autoControls: false,
61
+ startText: 'Start',
62
+ stopText: 'Stop',
63
+ autoControlsCombine: false,
64
+ autoControlsSelector: null,
65
+
66
+ // AUTO
67
+ auto: false,
68
+ pause: 4000,
69
+ autoStart: true,
70
+ autoDirection: 'next',
71
+ autoHover: false,
72
+ autoDelay: 0,
73
+ autoSlideForOnePage: false,
74
+
75
+ // CAROUSEL
76
+ minSlides: 1,
77
+ maxSlides: 1,
78
+ moveSlides: 0,
79
+ slideWidth: 0,
80
+
81
+ // CALLBACKS
82
+ onSliderLoad: function() {},
83
+ onSlideBefore: function() {},
84
+ onSlideAfter: function() {},
85
+ onSlideNext: function() {},
86
+ onSlidePrev: function() {},
87
+ onSliderResize: function() {}
88
+ }
89
+
90
+ $.fn.bxSlider = function(options){
91
+
92
+ if(this.length == 0) return this;
93
+
94
+ // support mutltiple elements
95
+ if(this.length > 1){
96
+ this.each(function(){$(this).bxSlider(options)});
97
+ return this;
98
+ }
99
+
100
+ // create a namespace to be used throughout the plugin
101
+ var slider = {};
102
+ // set a reference to our slider element
103
+ var el = this;
104
+ plugin.el = this;
105
+
106
+ /**
107
+ * Makes slideshow responsive
108
+ */
109
+ // first get the original window dimens (thanks alot IE)
110
+ var windowWidth = $(window).width();
111
+ var windowHeight = $(window).height();
112
+
113
+
114
+
115
+ /**
116
+ * ===================================================================================
117
+ * = PRIVATE FUNCTIONS
118
+ * ===================================================================================
119
+ */
120
+
121
+ /**
122
+ * Initializes namespace settings to be used throughout plugin
123
+ */
124
+ var init = function(){
125
+ // merge user-supplied options with the defaults
126
+ slider.settings = $.extend({}, defaults, options);
127
+ // parse slideWidth setting
128
+ slider.settings.slideWidth = parseInt(slider.settings.slideWidth);
129
+ // store the original children
130
+ slider.children = el.children(slider.settings.slideSelector);
131
+ // check if actual number of slides is less than minSlides / maxSlides
132
+ if(slider.children.length < slider.settings.minSlides) slider.settings.minSlides = slider.children.length;
133
+ if(slider.children.length < slider.settings.maxSlides) slider.settings.maxSlides = slider.children.length;
134
+ // if random start, set the startSlide setting to random number
135
+ if(slider.settings.randomStart) slider.settings.startSlide = Math.floor(Math.random() * slider.children.length);
136
+ // store active slide information
137
+ slider.active = { index: slider.settings.startSlide }
138
+ // store if the slider is in carousel mode (displaying / moving multiple slides)
139
+ slider.carousel = slider.settings.minSlides > 1 || slider.settings.maxSlides > 1;
140
+ // if carousel, force preloadImages = 'all'
141
+ if(slider.carousel) slider.settings.preloadImages = 'all';
142
+ // calculate the min / max width thresholds based on min / max number of slides
143
+ // used to setup and update carousel slides dimensions
144
+ slider.minThreshold = (slider.settings.minSlides * slider.settings.slideWidth) + ((slider.settings.minSlides - 1) * slider.settings.slideMargin);
145
+ slider.maxThreshold = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
146
+ // store the current state of the slider (if currently animating, working is true)
147
+ slider.working = false;
148
+ // initialize the controls object
149
+ slider.controls = {};
150
+ // initialize an auto interval
151
+ slider.interval = null;
152
+ // determine which property to use for transitions
153
+ slider.animProp = slider.settings.mode == 'vertical' ? 'top' : 'left';
154
+ // determine if hardware acceleration can be used
155
+ slider.usingCSS = slider.settings.useCSS && slider.settings.mode != 'fade' && (function(){
156
+ // create our test div element
157
+ var div = document.createElement('div');
158
+ // css transition properties
159
+ var props = ['WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
160
+ // test for each property
161
+ for(var i in props){
162
+ if(div.style[props[i]] !== undefined){
163
+ slider.cssPrefix = props[i].replace('Perspective', '').toLowerCase();
164
+ slider.animProp = '-' + slider.cssPrefix + '-transform';
165
+ return true;
166
+ }
167
+ }
168
+ return false;
169
+ }());
170
+ // if vertical mode always make maxSlides and minSlides equal
171
+ if(slider.settings.mode == 'vertical') slider.settings.maxSlides = slider.settings.minSlides;
172
+ // save original style data
173
+ el.data("origStyle", el.attr("style"));
174
+ el.children(slider.settings.slideSelector).each(function() {
175
+ $(this).data("origStyle", $(this).attr("style"));
176
+ });
177
+ // perform all DOM / CSS modifications
178
+ setup();
179
+ }
180
+
181
+ /**
182
+ * Performs all DOM and CSS modifications
183
+ */
184
+ var setup = function(){
185
+ // wrap el in a wrapper
186
+ el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');
187
+ // store a namspace reference to .bx-viewport
188
+ slider.viewport = el.parent();
189
+ // add a loading div to display while images are loading
190
+ slider.loader = $('<div class="bx-loading" />');
191
+ slider.viewport.prepend(slider.loader);
192
+ // set el to a massive width, to hold any needed slides
193
+ // also strip any margin and padding from el
194
+ el.css({
195
+ width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',
196
+ position: 'relative'
197
+ });
198
+ // if using CSS, add the easing property
199
+ if(slider.usingCSS && slider.settings.easing){
200
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);
201
+ // if not using CSS and no easing value was supplied, use the default JS animation easing (swing)
202
+ }else if(!slider.settings.easing){
203
+ slider.settings.easing = 'swing';
204
+ }
205
+ var slidesShowing = getNumberSlidesShowing();
206
+ // make modifications to the viewport (.bx-viewport)
207
+ slider.viewport.css({
208
+ width: '100%',
209
+ overflow: 'hidden',
210
+ position: 'relative'
211
+ });
212
+ slider.viewport.parent().css({
213
+ maxWidth: getViewportMaxWidth()
214
+ });
215
+ // make modification to the wrapper (.bx-wrapper)
216
+ if(!slider.settings.pager) {
217
+ slider.viewport.parent().css({
218
+ margin: '0 auto 0px'
219
+ });
220
+ }
221
+ // apply css to all slider children
222
+ slider.children.css({
223
+ 'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',
224
+ listStyle: 'none',
225
+ position: 'relative'
226
+ });
227
+ // apply the calculated width after the float is applied to prevent scrollbar interference
228
+ slider.children.css('width', getSlideWidth());
229
+ // if slideMargin is supplied, add the css
230
+ if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);
231
+ if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);
232
+ // if "fade" mode, add positioning and z-index CSS
233
+ if(slider.settings.mode == 'fade'){
234
+ slider.children.css({
235
+ position: 'absolute',
236
+ zIndex: 0,
237
+ display: 'none'
238
+ });
239
+ // prepare the z-index on the showing element
240
+ slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});
241
+ }
242
+ // create an element to contain all slider controls (pager, start / stop, etc)
243
+ slider.controls.el = $('<div class="bx-controls" />');
244
+ // if captions are requested, add them
245
+ if(slider.settings.captions) appendCaptions();
246
+ // check if startSlide is last slide
247
+ slider.active.last = slider.settings.startSlide == getPagerQty() - 1;
248
+ // if video is true, set up the fitVids plugin
249
+ if(slider.settings.video) el.fitVids();
250
+ // set the default preload selector (visible)
251
+ var preloadSelector = slider.children.eq(slider.settings.startSlide);
252
+ if (slider.settings.preloadImages == "all") preloadSelector = slider.children;
253
+ // only check for control addition if not in "ticker" mode
254
+ if(!slider.settings.ticker){
255
+ // if pager is requested, add it
256
+ if(slider.settings.pager) appendPager();
257
+ // if controls are requested, add them
258
+ if(slider.settings.controls) appendControls();
259
+ // if auto is true, and auto controls are requested, add them
260
+ if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();
261
+ // if any control option is requested, add the controls wrapper
262
+ if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);
263
+ // if ticker mode, do not allow a pager
264
+ }else{
265
+ slider.settings.pager = false;
266
+ }
267
+ // preload all images, then perform final DOM / CSS modifications that depend on images being loaded
268
+ loadElements(preloadSelector, start);
269
+ }
270
+
271
+ var loadElements = function(selector, callback){
272
+ var total = selector.find('img, iframe').length;
273
+ if (total == 0){
274
+ callback();
275
+ return;
276
+ }
277
+ var count = 0;
278
+ selector.find('img, iframe').each(function(){
279
+ $(this).one('load', function() {
280
+ if(++count == total) callback();
281
+ }).each(function() {
282
+ if(this.complete) $(this).load();
283
+ });
284
+ });
285
+ }
286
+
287
+ /**
288
+ * Start the slider
289
+ */
290
+ var start = function(){
291
+ // if infinite loop, prepare additional slides
292
+ if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){
293
+ var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides;
294
+ var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone');
295
+ var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');
296
+ el.append(sliceAppend).prepend(slicePrepend);
297
+ }
298
+ // remove the loading DOM element
299
+ slider.loader.remove();
300
+ // set the left / top position of "el"
301
+ setSlidePosition();
302
+ // if "vertical" mode, always use adaptiveHeight to prevent odd behavior
303
+ if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
304
+ // set the viewport height
305
+ slider.viewport.height(getViewportHeight());
306
+ // make sure everything is positioned just right (same as a window resize)
307
+ el.redrawSlider();
308
+ // onSliderLoad callback
309
+ slider.settings.onSliderLoad(slider.active.index);
310
+ // slider has been fully initialized
311
+ slider.initialized = true;
312
+ // bind the resize call to the window
313
+ if (slider.settings.responsive) $(window).bind('resize', resizeWindow);
314
+ // if auto is true and has more than 1 page, start the show
315
+ if (slider.settings.auto && slider.settings.autoStart && (getPagerQty() > 1 || slider.settings.autoSlideForOnePage)) initAuto();
316
+ // if ticker is true, start the ticker
317
+ if (slider.settings.ticker) initTicker();
318
+ // if pager is requested, make the appropriate pager link active
319
+ if (slider.settings.pager) updatePagerActive(slider.settings.startSlide);
320
+ // check for any updates to the controls (like hideControlOnEnd updates)
321
+ if (slider.settings.controls) updateDirectionControls();
322
+ // if touchEnabled is true, setup the touch events
323
+ if (slider.settings.touchEnabled && !slider.settings.ticker) initTouch();
324
+ }
325
+
326
+ /**
327
+ * Returns the calculated height of the viewport, used to determine either adaptiveHeight or the maxHeight value
328
+ */
329
+ var getViewportHeight = function(){
330
+ var height = 0;
331
+ // first determine which children (slides) should be used in our height calculation
332
+ var children = $();
333
+ // if mode is not "vertical" and adaptiveHeight is false, include all children
334
+ if(slider.settings.mode != 'vertical' && !slider.settings.adaptiveHeight){
335
+ children = slider.children;
336
+ }else{
337
+ // if not carousel, return the single active child
338
+ if(!slider.carousel){
339
+ children = slider.children.eq(slider.active.index);
340
+ // if carousel, return a slice of children
341
+ }else{
342
+ // get the individual slide index
343
+ var currentIndex = slider.settings.moveSlides == 1 ? slider.active.index : slider.active.index * getMoveBy();
344
+ // add the current slide to the children
345
+ children = slider.children.eq(currentIndex);
346
+ // cycle through the remaining "showing" slides
347
+ for (i = 1; i <= slider.settings.maxSlides - 1; i++){
348
+ // if looped back to the start
349
+ if(currentIndex + i >= slider.children.length){
350
+ children = children.add(slider.children.eq(i - 1));
351
+ }else{
352
+ children = children.add(slider.children.eq(currentIndex + i));
353
+ }
354
+ }
355
+ }
356
+ }
357
+ // if "vertical" mode, calculate the sum of the heights of the children
358
+ if(slider.settings.mode == 'vertical'){
359
+ children.each(function(index) {
360
+ height += $(this).outerHeight();
361
+ });
362
+ // add user-supplied margins
363
+ if(slider.settings.slideMargin > 0){
364
+ height += slider.settings.slideMargin * (slider.settings.minSlides - 1);
365
+ }
366
+ // if not "vertical" mode, calculate the max height of the children
367
+ }else{
368
+ height = Math.max.apply(Math, children.map(function(){
369
+ return $(this).outerHeight(false);
370
+ }).get());
371
+ }
372
+
373
+ if(slider.viewport.css('box-sizing') == 'border-box'){
374
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom')) +
375
+ parseFloat(slider.viewport.css('border-top-width')) + parseFloat(slider.viewport.css('border-bottom-width'));
376
+ }else if(slider.viewport.css('box-sizing') == 'padding-box'){
377
+ height += parseFloat(slider.viewport.css('padding-top')) + parseFloat(slider.viewport.css('padding-bottom'));
378
+ }
379
+
380
+ return height;
381
+ }
382
+
383
+ /**
384
+ * Returns the calculated width to be used for the outer wrapper / viewport
385
+ */
386
+ var getViewportMaxWidth = function(){
387
+ var width = '100%';
388
+ if(slider.settings.slideWidth > 0){
389
+ if(slider.settings.mode == 'horizontal'){
390
+ width = (slider.settings.maxSlides * slider.settings.slideWidth) + ((slider.settings.maxSlides - 1) * slider.settings.slideMargin);
391
+ }else{
392
+ width = slider.settings.slideWidth;
393
+ }
394
+ }
395
+ return width;
396
+ }
397
+
398
+ /**
399
+ * Returns the calculated width to be applied to each slide
400
+ */
401
+ var getSlideWidth = function(){
402
+ // start with any user-supplied slide width
403
+ var newElWidth = slider.settings.slideWidth;
404
+ // get the current viewport width
405
+ var wrapWidth = slider.viewport.width();
406
+ // if slide width was not supplied, or is larger than the viewport use the viewport width
407
+ if(slider.settings.slideWidth == 0 ||
408
+ (slider.settings.slideWidth > wrapWidth && !slider.carousel) ||
409
+ slider.settings.mode == 'vertical'){
410
+ newElWidth = wrapWidth;
411
+ // if carousel, use the thresholds to determine the width
412
+ }else if(slider.settings.maxSlides > 1 && slider.settings.mode == 'horizontal'){
413
+ if(wrapWidth > slider.maxThreshold){
414
+ // newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.maxSlides - 1))) / slider.settings.maxSlides;
415
+ }else if(wrapWidth < slider.minThreshold){
416
+ newElWidth = (wrapWidth - (slider.settings.slideMargin * (slider.settings.minSlides - 1))) / slider.settings.minSlides;
417
+ }
418
+ }
419
+ return newElWidth;
420
+ }
421
+
422
+ /**
423
+ * Returns the number of slides currently visible in the viewport (includes partially visible slides)
424
+ */
425
+ var getNumberSlidesShowing = function(){
426
+ var slidesShowing = 1;
427
+ if(slider.settings.mode == 'horizontal' && slider.settings.slideWidth > 0){
428
+ // if viewport is smaller than minThreshold, return minSlides
429
+ if(slider.viewport.width() < slider.minThreshold){
430
+ slidesShowing = slider.settings.minSlides;
431
+ // if viewport is larger than minThreshold, return maxSlides
432
+ }else if(slider.viewport.width() > slider.maxThreshold){
433
+ slidesShowing = slider.settings.maxSlides;
434
+ // if viewport is between min / max thresholds, divide viewport width by first child width
435
+ }else{
436
+ var childWidth = slider.children.first().width() + slider.settings.slideMargin;
437
+ slidesShowing = Math.floor((slider.viewport.width() +
438
+ slider.settings.slideMargin) / childWidth);
439
+ }
440
+ // if "vertical" mode, slides showing will always be minSlides
441
+ }else if(slider.settings.mode == 'vertical'){
442
+ slidesShowing = slider.settings.minSlides;
443
+ }
444
+ return slidesShowing;
445
+ }
446
+
447
+ /**
448
+ * Returns the number of pages (one full viewport of slides is one "page")
449
+ */
450
+ var getPagerQty = function(){
451
+ var pagerQty = 0;
452
+ // if moveSlides is specified by the user
453
+ if(slider.settings.moveSlides > 0){
454
+ if(slider.settings.infiniteLoop){
455
+ pagerQty = Math.ceil(slider.children.length / getMoveBy());
456
+ }else{
457
+ // use a while loop to determine pages
458
+ var breakPoint = 0;
459
+ var counter = 0
460
+ // when breakpoint goes above children length, counter is the number of pages
461
+ while (breakPoint < slider.children.length){
462
+ ++pagerQty;
463
+ breakPoint = counter + getNumberSlidesShowing();
464
+ counter += slider.settings.moveSlides <= getNumberSlidesShowing() ? slider.settings.moveSlides : getNumberSlidesShowing();
465
+ }
466
+ }
467
+ // if moveSlides is 0 (auto) divide children length by sides showing, then round up
468
+ }else{
469
+ pagerQty = Math.ceil(slider.children.length / getNumberSlidesShowing());
470
+ }
471
+ return pagerQty;
472
+ }
473
+
474
+ /**
475
+ * Returns the number of indivual slides by which to shift the slider
476
+ */
477
+ var getMoveBy = function(){
478
+ // if moveSlides was set by the user and moveSlides is less than number of slides showing
479
+ if(slider.settings.moveSlides > 0 && slider.settings.moveSlides <= getNumberSlidesShowing()){
480
+ return slider.settings.moveSlides;
481
+ }
482
+ // if moveSlides is 0 (auto)
483
+ return getNumberSlidesShowing();
484
+ }
485
+
486
+ /**
487
+ * Sets the slider's (el) left or top position
488
+ */
489
+ var setSlidePosition = function(){
490
+ // if last slide, not infinite loop, and number of children is larger than specified maxSlides
491
+ if(slider.children.length > slider.settings.maxSlides && slider.active.last && !slider.settings.infiniteLoop){
492
+ if (slider.settings.mode == 'horizontal'){
493
+ // get the last child's position
494
+ var lastChild = slider.children.last();
495
+ var position = lastChild.position();
496
+ // set the left position
497
+ setPositionProperty(-(position.left - (slider.viewport.width() - lastChild.outerWidth())), 'reset', 0);
498
+ }else if(slider.settings.mode == 'vertical'){
499
+ // get the last showing index's position
500
+ var lastShowingIndex = slider.children.length - slider.settings.minSlides;
501
+ var position = slider.children.eq(lastShowingIndex).position();
502
+ // set the top position
503
+ setPositionProperty(-position.top, 'reset', 0);
504
+ }
505
+ // if not last slide
506
+ }else{
507
+ // get the position of the first showing slide
508
+ var position = slider.children.eq(slider.active.index * getMoveBy()).position();
509
+ // check for last slide
510
+ if (slider.active.index == getPagerQty() - 1) slider.active.last = true;
511
+ // set the repective position
512
+ if (position != undefined){
513
+ if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);
514
+ else if (slider.settings.mode == 'vertical') setPositionProperty(-position.top, 'reset', 0);
515
+ }
516
+ }
517
+ }
518
+
519
+ /**
520
+ * Sets the el's animating property position (which in turn will sometimes animate el).
521
+ * If using CSS, sets the transform property. If not using CSS, sets the top / left property.
522
+ *
523
+ * @param value (int)
524
+ * - the animating property's value
525
+ *
526
+ * @param type (string) 'slider', 'reset', 'ticker'
527
+ * - the type of instance for which the function is being
528
+ *
529
+ * @param duration (int)
530
+ * - the amount of time (in ms) the transition should occupy
531
+ *
532
+ * @param params (array) optional
533
+ * - an optional parameter containing any variables that need to be passed in
534
+ */
535
+ var setPositionProperty = function(value, type, duration, params){
536
+ // use CSS transform
537
+ if(slider.usingCSS){
538
+ // determine the translate3d value
539
+ var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
540
+ // add the CSS transition-duration
541
+ el.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
542
+ if(type == 'slide'){
543
+ // set the property value
544
+ el.css(slider.animProp, propValue);
545
+ // bind a callback method - executes when CSS transition completes
546
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
547
+ // unbind the callback
548
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
549
+ updateAfterSlideTransition();
550
+ });
551
+ }else if(type == 'reset'){
552
+ el.css(slider.animProp, propValue);
553
+ }else if(type == 'ticker'){
554
+ // make the transition use 'linear'
555
+ el.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
556
+ el.css(slider.animProp, propValue);
557
+ // bind a callback method - executes when CSS transition completes
558
+ el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
559
+ // unbind the callback
560
+ el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
561
+ // reset the position
562
+ setPositionProperty(params['resetValue'], 'reset', 0);
563
+ // start the loop again
564
+ tickerLoop();
565
+ });
566
+ }
567
+ // use JS animate
568
+ }else{
569
+ var animateObj = {};
570
+ animateObj[slider.animProp] = value;
571
+ if(type == 'slide'){
572
+ el.animate(animateObj, duration, slider.settings.easing, function(){
573
+ updateAfterSlideTransition();
574
+ });
575
+ }else if(type == 'reset'){
576
+ el.css(slider.animProp, value)
577
+ }else if(type == 'ticker'){
578
+ el.animate(animateObj, speed, 'linear', function(){
579
+ setPositionProperty(params['resetValue'], 'reset', 0);
580
+ // run the recursive loop after animation
581
+ tickerLoop();
582
+ });
583
+ }
584
+ }
585
+ }
586
+
587
+ /**
588
+ * Populates the pager with proper amount of pages
589
+ */
590
+ var populatePager = function(){
591
+ var pagerHtml = '';
592
+ var pagerQty = getPagerQty();
593
+ // loop through each pager item
594
+ for(var i=0; i < pagerQty; i++){
595
+ var linkContent = '';
596
+ // if a buildPager function is supplied, use it to get pager link value, else use index + 1
597
+ if(slider.settings.buildPager && $.isFunction(slider.settings.buildPager)){
598
+ linkContent = slider.settings.buildPager(i);
599
+ slider.pagerEl.addClass('bx-custom-pager');
600
+ }else{
601
+ linkContent = i + 1;
602
+ slider.pagerEl.addClass('bx-default-pager');
603
+ }
604
+ // var linkContent = slider.settings.buildPager && $.isFunction(slider.settings.buildPager) ? slider.settings.buildPager(i) : i + 1;
605
+ // add the markup to the string
606
+ pagerHtml += '<div class="bx-pager-item"><a href="" data-slide-index="' + i + '" class="bx-pager-link">' + linkContent + '</a></div>';
607
+ };
608
+ // populate the pager element with pager links
609
+ slider.pagerEl.html(pagerHtml);
610
+ }
611
+
612
+ /**
613
+ * Appends the pager to the controls element
614
+ */
615
+ var appendPager = function(){
616
+ if(!slider.settings.pagerCustom){
617
+ // create the pager DOM element
618
+ slider.pagerEl = $('<div class="bx-pager" />');
619
+ // if a pager selector was supplied, populate it with the pager
620
+ if(slider.settings.pagerSelector){
621
+ $(slider.settings.pagerSelector).html(slider.pagerEl);
622
+ // if no pager selector was supplied, add it after the wrapper
623
+ }else{
624
+ slider.controls.el.addClass('bx-has-pager').append(slider.pagerEl);
625
+ }
626
+ // populate the pager
627
+ populatePager();
628
+ }else{
629
+ slider.pagerEl = $(slider.settings.pagerCustom);
630
+ }
631
+ // assign the pager click binding
632
+ slider.pagerEl.on('click', 'a', clickPagerBind);
633
+ }
634
+
635
+ /**
636
+ * Appends prev / next controls to the controls element
637
+ */
638
+ var appendControls = function(){
639
+ slider.controls.next = $('<a class="bx-next" href="">' + slider.settings.nextText + '</a>');
640
+ slider.controls.prev = $('<a class="bx-prev" href="">' + slider.settings.prevText + '</a>');
641
+ // bind click actions to the controls
642
+ slider.controls.next.bind('click', clickNextBind);
643
+ slider.controls.prev.bind('click', clickPrevBind);
644
+ // if nextSlector was supplied, populate it
645
+ if(slider.settings.nextSelector){
646
+ $(slider.settings.nextSelector).append(slider.controls.next);
647
+ }
648
+ // if prevSlector was supplied, populate it
649
+ if(slider.settings.prevSelector){
650
+ $(slider.settings.prevSelector).append(slider.controls.prev);
651
+ }
652
+ // if no custom selectors were supplied
653
+ if(!slider.settings.nextSelector && !slider.settings.prevSelector){
654
+ // add the controls to the DOM
655
+ slider.controls.directionEl = $('<div class="bx-controls-direction" />');
656
+ // add the control elements to the directionEl
657
+ slider.controls.directionEl.append(slider.controls.prev).append(slider.controls.next);
658
+ // slider.viewport.append(slider.controls.directionEl);
659
+ slider.controls.el.addClass('bx-has-controls-direction').append(slider.controls.directionEl);
660
+ }
661
+ }
1286
662
 
1287
- /*jshint curly: true, eqeqeq: true, noempty: true, strict: true, undef: true, browser: true */
1288
- /*global jQuery: false */
663
+ /**
664
+ * Appends start / stop auto controls to the controls element
665
+ */
666
+ var appendControlsAuto = function(){
667
+ slider.controls.start = $('<div class="bx-controls-auto-item"><a class="bx-start" href="">' + slider.settings.startText + '</a></div>');
668
+ slider.controls.stop = $('<div class="bx-controls-auto-item"><a class="bx-stop" href="">' + slider.settings.stopText + '</a></div>');
669
+ // add the controls to the DOM
670
+ slider.controls.autoEl = $('<div class="bx-controls-auto" />');
671
+ // bind click actions to the controls
672
+ slider.controls.autoEl.on('click', '.bx-start', clickStartBind);
673
+ slider.controls.autoEl.on('click', '.bx-stop', clickStopBind);
674
+ // if autoControlsCombine, insert only the "start" control
675
+ if(slider.settings.autoControlsCombine){
676
+ slider.controls.autoEl.append(slider.controls.start);
677
+ // if autoControlsCombine is false, insert both controls
678
+ }else{
679
+ slider.controls.autoEl.append(slider.controls.start).append(slider.controls.stop);
680
+ }
681
+ // if auto controls selector was supplied, populate it with the controls
682
+ if(slider.settings.autoControlsSelector){
683
+ $(slider.settings.autoControlsSelector).html(slider.controls.autoEl);
684
+ // if auto controls selector was not supplied, add it after the wrapper
685
+ }else{
686
+ slider.controls.el.addClass('bx-has-controls-auto').append(slider.controls.autoEl);
687
+ }
688
+ // update the auto controls
689
+ updateAutoControls(slider.settings.autoStart ? 'stop' : 'start');
690
+ }
1289
691
 
1290
- (function(c,n){var l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function m(){var b=c(i),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function j(b,a){b.src===l||-1!==c.inArray(b,k)||(k.push(b),a?h.push(b):i.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),o&&d.notifyWith(c(b),[a,e,c(i),c(h)]),e.length===k.length&&(setTimeout(m),e.unbind(".imagesLoaded")))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():
1291
- 0,o=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),k=[],i=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",function(b){j(b.target,"error"===b.type)}).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)j(a,e.isBroken);else if(a.complete&&a.naturalWidth!==n)j(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=l,a.src=d}):m();return d?d.promise(g):
1292
- g}})(jQuery);
692
+ /**
693
+ * Appends image captions to the DOM
694
+ */
695
+ var appendCaptions = function(){
696
+ // cycle through each child
697
+ slider.children.each(function(index){
698
+ // get the image title attribute
699
+ var title = $(this).find('img:first').attr('title');
700
+ // append the caption
701
+ if (title != undefined && ('' + title).length) {
702
+ $(this).append('<div class="bx-caption"><span>' + title + '</span></div>');
703
+ }
704
+ });
705
+ }
706
+
707
+ /**
708
+ * Click next binding
709
+ *
710
+ * @param e (event)
711
+ * - DOM event object
712
+ */
713
+ var clickNextBind = function(e){
714
+ // if auto show is running, stop it
715
+ if (slider.settings.auto) el.stopAuto();
716
+ el.goToNextSlide();
717
+ e.preventDefault();
718
+ }
719
+
720
+ /**
721
+ * Click prev binding
722
+ *
723
+ * @param e (event)
724
+ * - DOM event object
725
+ */
726
+ var clickPrevBind = function(e){
727
+ // if auto show is running, stop it
728
+ if (slider.settings.auto) el.stopAuto();
729
+ el.goToPrevSlide();
730
+ e.preventDefault();
731
+ }
732
+
733
+ /**
734
+ * Click start binding
735
+ *
736
+ * @param e (event)
737
+ * - DOM event object
738
+ */
739
+ var clickStartBind = function(e){
740
+ el.startAuto();
741
+ e.preventDefault();
742
+ }
743
+
744
+ /**
745
+ * Click stop binding
746
+ *
747
+ * @param e (event)
748
+ * - DOM event object
749
+ */
750
+ var clickStopBind = function(e){
751
+ el.stopAuto();
752
+ e.preventDefault();
753
+ }
754
+
755
+ /**
756
+ * Click pager binding
757
+ *
758
+ * @param e (event)
759
+ * - DOM event object
760
+ */
761
+ var clickPagerBind = function(e){
762
+ // if auto show is running, stop it
763
+ if (slider.settings.auto) el.stopAuto();
764
+ var pagerLink = $(e.currentTarget);
765
+ if(pagerLink.attr('data-slide-index') !== undefined){
766
+ var pagerIndex = parseInt(pagerLink.attr('data-slide-index'));
767
+ // if clicked pager link is not active, continue with the goToSlide call
768
+ if(pagerIndex != slider.active.index) el.goToSlide(pagerIndex);
769
+ e.preventDefault();
770
+ }
771
+ }
772
+
773
+ /**
774
+ * Updates the pager links with an active class
775
+ *
776
+ * @param slideIndex (int)
777
+ * - index of slide to make active
778
+ */
779
+ var updatePagerActive = function(slideIndex){
780
+ // if "short" pager type
781
+ var len = slider.children.length; // nb of children
782
+ if(slider.settings.pagerType == 'short'){
783
+ if(slider.settings.maxSlides > 1) {
784
+ len = Math.ceil(slider.children.length/slider.settings.maxSlides);
785
+ }
786
+ slider.pagerEl.html( (slideIndex + 1) + slider.settings.pagerShortSeparator + len);
787
+ return;
788
+ }
789
+ // remove all pager active classes
790
+ slider.pagerEl.find('a').removeClass('active');
791
+ // apply the active class for all pagers
792
+ slider.pagerEl.each(function(i, el) { $(el).find('a').eq(slideIndex).addClass('active'); });
793
+ }
794
+
795
+ /**
796
+ * Performs needed actions after a slide transition
797
+ */
798
+ var updateAfterSlideTransition = function(){
799
+ // if infinte loop is true
800
+ if(slider.settings.infiniteLoop){
801
+ var position = '';
802
+ // first slide
803
+ if(slider.active.index == 0){
804
+ // set the new position
805
+ position = slider.children.eq(0).position();
806
+ // carousel, last slide
807
+ }else if(slider.active.index == getPagerQty() - 1 && slider.carousel){
808
+ position = slider.children.eq((getPagerQty() - 1) * getMoveBy()).position();
809
+ // last slide
810
+ }else if(slider.active.index == slider.children.length - 1){
811
+ position = slider.children.eq(slider.children.length - 1).position();
812
+ }
813
+ if(position){
814
+ if (slider.settings.mode == 'horizontal') { setPositionProperty(-position.left, 'reset', 0); }
815
+ else if (slider.settings.mode == 'vertical') { setPositionProperty(-position.top, 'reset', 0); }
816
+ }
817
+ }
818
+ // declare that the transition is complete
819
+ slider.working = false;
820
+ // onSlideAfter callback
821
+ slider.settings.onSlideAfter(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
822
+ }
823
+
824
+ /**
825
+ * Updates the auto controls state (either active, or combined switch)
826
+ *
827
+ * @param state (string) "start", "stop"
828
+ * - the new state of the auto show
829
+ */
830
+ var updateAutoControls = function(state){
831
+ // if autoControlsCombine is true, replace the current control with the new state
832
+ if(slider.settings.autoControlsCombine){
833
+ slider.controls.autoEl.html(slider.controls[state]);
834
+ // if autoControlsCombine is false, apply the "active" class to the appropriate control
835
+ }else{
836
+ slider.controls.autoEl.find('a').removeClass('active');
837
+ slider.controls.autoEl.find('a:not(.bx-' + state + ')').addClass('active');
838
+ }
839
+ }
840
+
841
+ /**
842
+ * Updates the direction controls (checks if either should be hidden)
843
+ */
844
+ var updateDirectionControls = function(){
845
+ if(getPagerQty() == 1){
846
+ slider.controls.prev.addClass('disabled');
847
+ slider.controls.next.addClass('disabled');
848
+ }else if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
849
+ // if first slide
850
+ if (slider.active.index == 0){
851
+ slider.controls.prev.addClass('disabled');
852
+ slider.controls.next.removeClass('disabled');
853
+ // if last slide
854
+ }else if(slider.active.index == getPagerQty() - 1){
855
+ slider.controls.next.addClass('disabled');
856
+ slider.controls.prev.removeClass('disabled');
857
+ // if any slide in the middle
858
+ }else{
859
+ slider.controls.prev.removeClass('disabled');
860
+ slider.controls.next.removeClass('disabled');
861
+ }
862
+ }
863
+ }
864
+
865
+ /**
866
+ * Initialzes the auto process
867
+ */
868
+ var initAuto = function(){
869
+ // if autoDelay was supplied, launch the auto show using a setTimeout() call
870
+ if(slider.settings.autoDelay > 0){
871
+ var timeout = setTimeout(el.startAuto, slider.settings.autoDelay);
872
+ // if autoDelay was not supplied, start the auto show normally
873
+ }else{
874
+ el.startAuto();
875
+ }
876
+ // if autoHover is requested
877
+ if(slider.settings.autoHover){
878
+ // on el hover
879
+ el.hover(function(){
880
+ // if the auto show is currently playing (has an active interval)
881
+ if(slider.interval){
882
+ // stop the auto show and pass true agument which will prevent control update
883
+ el.stopAuto(true);
884
+ // create a new autoPaused value which will be used by the relative "mouseout" event
885
+ slider.autoPaused = true;
886
+ }
887
+ }, function(){
888
+ // if the autoPaused value was created be the prior "mouseover" event
889
+ if(slider.autoPaused){
890
+ // start the auto show and pass true agument which will prevent control update
891
+ el.startAuto(true);
892
+ // reset the autoPaused value
893
+ slider.autoPaused = null;
894
+ }
895
+ });
896
+ }
897
+ }
898
+
899
+ /**
900
+ * Initialzes the ticker process
901
+ */
902
+ var initTicker = function(){
903
+ var startPosition = 0;
904
+ // if autoDirection is "next", append a clone of the entire slider
905
+ if(slider.settings.autoDirection == 'next'){
906
+ el.append(slider.children.clone().addClass('bx-clone'));
907
+ // if autoDirection is "prev", prepend a clone of the entire slider, and set the left position
908
+ }else{
909
+ el.prepend(slider.children.clone().addClass('bx-clone'));
910
+ var position = slider.children.first().position();
911
+ startPosition = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
912
+ }
913
+ setPositionProperty(startPosition, 'reset', 0);
914
+ // do not allow controls in ticker mode
915
+ slider.settings.pager = false;
916
+ slider.settings.controls = false;
917
+ slider.settings.autoControls = false;
918
+ // if autoHover is requested
919
+ if(slider.settings.tickerHover && !slider.usingCSS){
920
+ // on el hover
921
+ slider.viewport.hover(function(){
922
+ el.stop();
923
+ }, function(){
924
+ // calculate the total width of children (used to calculate the speed ratio)
925
+ var totalDimens = 0;
926
+ slider.children.each(function(index){
927
+ totalDimens += slider.settings.mode == 'horizontal' ? $(this).outerWidth(true) : $(this).outerHeight(true);
928
+ });
929
+ // calculate the speed ratio (used to determine the new speed to finish the paused animation)
930
+ var ratio = slider.settings.speed / totalDimens;
931
+ // determine which property to use
932
+ var property = slider.settings.mode == 'horizontal' ? 'left' : 'top';
933
+ // calculate the new speed
934
+ var newSpeed = ratio * (totalDimens - (Math.abs(parseInt(el.css(property)))));
935
+ tickerLoop(newSpeed);
936
+ });
937
+ }
938
+ // start the ticker loop
939
+ tickerLoop();
940
+ }
941
+
942
+ /**
943
+ * Runs a continuous loop, news ticker-style
944
+ */
945
+ var tickerLoop = function(resumeSpeed){
946
+ speed = resumeSpeed ? resumeSpeed : slider.settings.speed;
947
+ var position = {left: 0, top: 0};
948
+ var reset = {left: 0, top: 0};
949
+ // if "next" animate left position to last child, then reset left to 0
950
+ if(slider.settings.autoDirection == 'next'){
951
+ position = el.find('.bx-clone').first().position();
952
+ // if "prev" animate left position to 0, then reset left to first non-clone child
953
+ }else{
954
+ reset = slider.children.first().position();
955
+ }
956
+ var animateProperty = slider.settings.mode == 'horizontal' ? -position.left : -position.top;
957
+ var resetValue = slider.settings.mode == 'horizontal' ? -reset.left : -reset.top;
958
+ var params = {resetValue: resetValue};
959
+ setPositionProperty(animateProperty, 'ticker', speed, params);
960
+ }
961
+
962
+ /**
963
+ * Initializes touch events
964
+ */
965
+ var initTouch = function(){
966
+ // initialize object to contain all touch values
967
+ slider.touch = {
968
+ start: {x: 0, y: 0},
969
+ end: {x: 0, y: 0}
970
+ }
971
+ slider.viewport.bind('touchstart', onTouchStart);
972
+ }
973
+
974
+ /**
975
+ * Event handler for "touchstart"
976
+ *
977
+ * @param e (event)
978
+ * - DOM event object
979
+ */
980
+ var onTouchStart = function(e){
981
+ if(slider.working){
982
+ e.preventDefault();
983
+ }else{
984
+ // record the original position when touch starts
985
+ slider.touch.originalPos = el.position();
986
+ var orig = e.originalEvent;
987
+ // record the starting touch x, y coordinates
988
+ slider.touch.start.x = orig.changedTouches[0].pageX;
989
+ slider.touch.start.y = orig.changedTouches[0].pageY;
990
+ // bind a "touchmove" event to the viewport
991
+ slider.viewport.bind('touchmove', onTouchMove);
992
+ // bind a "touchend" event to the viewport
993
+ slider.viewport.bind('touchend', onTouchEnd);
994
+ }
995
+ }
996
+
997
+ /**
998
+ * Event handler for "touchmove"
999
+ *
1000
+ * @param e (event)
1001
+ * - DOM event object
1002
+ */
1003
+ var onTouchMove = function(e){
1004
+ var orig = e.originalEvent;
1005
+ // if scrolling on y axis, do not prevent default
1006
+ var xMovement = Math.abs(orig.changedTouches[0].pageX - slider.touch.start.x);
1007
+ var yMovement = Math.abs(orig.changedTouches[0].pageY - slider.touch.start.y);
1008
+ // x axis swipe
1009
+ if((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX){
1010
+ e.preventDefault();
1011
+ // y axis swipe
1012
+ }else if((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY){
1013
+ e.preventDefault();
1014
+ }
1015
+ if(slider.settings.mode != 'fade' && slider.settings.oneToOneTouch){
1016
+ var value = 0;
1017
+ // if horizontal, drag along x axis
1018
+ if(slider.settings.mode == 'horizontal'){
1019
+ var change = orig.changedTouches[0].pageX - slider.touch.start.x;
1020
+ value = slider.touch.originalPos.left + change;
1021
+ // if vertical, drag along y axis
1022
+ }else{
1023
+ var change = orig.changedTouches[0].pageY - slider.touch.start.y;
1024
+ value = slider.touch.originalPos.top + change;
1025
+ }
1026
+ setPositionProperty(value, 'reset', 0);
1027
+ }
1028
+ }
1029
+
1030
+ /**
1031
+ * Event handler for "touchend"
1032
+ *
1033
+ * @param e (event)
1034
+ * - DOM event object
1035
+ */
1036
+ var onTouchEnd = function(e){
1037
+ slider.viewport.unbind('touchmove', onTouchMove);
1038
+ var orig = e.originalEvent;
1039
+ var value = 0;
1040
+ // record end x, y positions
1041
+ slider.touch.end.x = orig.changedTouches[0].pageX;
1042
+ slider.touch.end.y = orig.changedTouches[0].pageY;
1043
+ // if fade mode, check if absolute x distance clears the threshold
1044
+ if(slider.settings.mode == 'fade'){
1045
+ var distance = Math.abs(slider.touch.start.x - slider.touch.end.x);
1046
+ if(distance >= slider.settings.swipeThreshold){
1047
+ slider.touch.start.x > slider.touch.end.x ? el.goToNextSlide() : el.goToPrevSlide();
1048
+ el.stopAuto();
1049
+ }
1050
+ // not fade mode
1051
+ }else{
1052
+ var distance = 0;
1053
+ // calculate distance and el's animate property
1054
+ if(slider.settings.mode == 'horizontal'){
1055
+ distance = slider.touch.end.x - slider.touch.start.x;
1056
+ value = slider.touch.originalPos.left;
1057
+ }else{
1058
+ distance = slider.touch.end.y - slider.touch.start.y;
1059
+ value = slider.touch.originalPos.top;
1060
+ }
1061
+ // if not infinite loop and first / last slide, do not attempt a slide transition
1062
+ if(!slider.settings.infiniteLoop && ((slider.active.index == 0 && distance > 0) || (slider.active.last && distance < 0))){
1063
+ setPositionProperty(value, 'reset', 200);
1064
+ }else{
1065
+ // check if distance clears threshold
1066
+ if(Math.abs(distance) >= slider.settings.swipeThreshold){
1067
+ distance < 0 ? el.goToNextSlide() : el.goToPrevSlide();
1068
+ el.stopAuto();
1069
+ }else{
1070
+ // el.animate(property, 200);
1071
+ setPositionProperty(value, 'reset', 200);
1072
+ }
1073
+ }
1074
+ }
1075
+ slider.viewport.unbind('touchend', onTouchEnd);
1076
+ }
1077
+
1078
+ /**
1079
+ * Window resize event callback
1080
+ */
1081
+ var resizeWindow = function(e){
1082
+ // don't do anything if slider isn't initialized.
1083
+ if(!slider.initialized) return;
1084
+ // get the new window dimens (again, thank you IE)
1085
+ var windowWidthNew = $(window).width();
1086
+ var windowHeightNew = $(window).height();
1087
+ // make sure that it is a true window resize
1088
+ // *we must check this because our dinosaur friend IE fires a window resize event when certain DOM elements
1089
+ // are resized. Can you just die already?*
1090
+ if(windowWidth != windowWidthNew || windowHeight != windowHeightNew){
1091
+ // set the new window dimens
1092
+ windowWidth = windowWidthNew;
1093
+ windowHeight = windowHeightNew;
1094
+ // update all dynamic elements
1095
+ el.redrawSlider();
1096
+ // Call user resize handler
1097
+ slider.settings.onSliderResize.call(el, slider.active.index);
1098
+ }
1099
+ }
1100
+
1101
+ /**
1102
+ * ===================================================================================
1103
+ * = PUBLIC FUNCTIONS
1104
+ * ===================================================================================
1105
+ */
1106
+
1107
+ /**
1108
+ * Performs slide transition to the specified slide
1109
+ *
1110
+ * @param slideIndex (int)
1111
+ * - the destination slide's index (zero-based)
1112
+ *
1113
+ * @param direction (string)
1114
+ * - INTERNAL USE ONLY - the direction of travel ("prev" / "next")
1115
+ */
1116
+ el.goToSlide = function(slideIndex, direction){
1117
+ // if plugin is currently in motion, ignore request
1118
+ if(slider.working || slider.active.index == slideIndex) return;
1119
+ // declare that plugin is in motion
1120
+ slider.working = true;
1121
+ // store the old index
1122
+ slider.oldIndex = slider.active.index;
1123
+ // if slideIndex is less than zero, set active index to last child (this happens during infinite loop)
1124
+ if(slideIndex < 0){
1125
+ slider.active.index = getPagerQty() - 1;
1126
+ // if slideIndex is greater than children length, set active index to 0 (this happens during infinite loop)
1127
+ }else if(slideIndex >= getPagerQty()){
1128
+ slider.active.index = 0;
1129
+ // set active index to requested slide
1130
+ }else{
1131
+ slider.active.index = slideIndex;
1132
+ }
1133
+ // onSlideBefore, onSlideNext, onSlidePrev callbacks
1134
+ slider.settings.onSlideBefore(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1135
+ if(direction == 'next'){
1136
+ slider.settings.onSlideNext(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1137
+ }else if(direction == 'prev'){
1138
+ slider.settings.onSlidePrev(slider.children.eq(slider.active.index), slider.oldIndex, slider.active.index);
1139
+ }
1140
+ // check if last slide
1141
+ slider.active.last = slider.active.index >= getPagerQty() - 1;
1142
+ // update the pager with active class
1143
+ if(slider.settings.pager) updatePagerActive(slider.active.index);
1144
+ // // check for direction control update
1145
+ if(slider.settings.controls) updateDirectionControls();
1146
+ // if slider is set to mode: "fade"
1147
+ if(slider.settings.mode == 'fade'){
1148
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
1149
+ if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1150
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1151
+ }
1152
+ // fade out the visible child and reset its z-index value
1153
+ slider.children.filter(':visible').fadeOut(slider.settings.speed).css({zIndex: 0});
1154
+ // fade in the newly requested slide
1155
+ slider.children.eq(slider.active.index).css('zIndex', slider.settings.slideZIndex+1).fadeIn(slider.settings.speed, function(){
1156
+ $(this).css('zIndex', slider.settings.slideZIndex);
1157
+ updateAfterSlideTransition();
1158
+ });
1159
+ // slider mode is not "fade"
1160
+ }else{
1161
+ // if adaptiveHeight is true and next height is different from current height, animate to the new height
1162
+ if(slider.settings.adaptiveHeight && slider.viewport.height() != getViewportHeight()){
1163
+ slider.viewport.animate({height: getViewportHeight()}, slider.settings.adaptiveHeightSpeed);
1164
+ }
1165
+ var moveBy = 0;
1166
+ var position = {left: 0, top: 0};
1167
+ // if carousel and not infinite loop
1168
+ if(!slider.settings.infiniteLoop && slider.carousel && slider.active.last){
1169
+ if(slider.settings.mode == 'horizontal'){
1170
+ // get the last child position
1171
+ var lastChild = slider.children.eq(slider.children.length - 1);
1172
+ position = lastChild.position();
1173
+ // calculate the position of the last slide
1174
+ moveBy = slider.viewport.width() - lastChild.outerWidth();
1175
+ }else{
1176
+ // get last showing index position
1177
+ var lastShowingIndex = slider.children.length - slider.settings.minSlides;
1178
+ position = slider.children.eq(lastShowingIndex).position();
1179
+ }
1180
+ // horizontal carousel, going previous while on first slide (infiniteLoop mode)
1181
+ }else if(slider.carousel && slider.active.last && direction == 'prev'){
1182
+ // get the last child position
1183
+ var eq = slider.settings.moveSlides == 1 ? slider.settings.maxSlides - getMoveBy() : ((getPagerQty() - 1) * getMoveBy()) - (slider.children.length - slider.settings.maxSlides);
1184
+ var lastChild = el.children('.bx-clone').eq(eq);
1185
+ position = lastChild.position();
1186
+ // if infinite loop and "Next" is clicked on the last slide
1187
+ }else if(direction == 'next' && slider.active.index == 0){
1188
+ // get the last clone position
1189
+ position = el.find('> .bx-clone').eq(slider.settings.maxSlides).position();
1190
+ slider.active.last = false;
1191
+ // normal non-zero requests
1192
+ }else if(slideIndex >= 0){
1193
+ var requestEl = slideIndex * getMoveBy();
1194
+ position = slider.children.eq(requestEl).position();
1195
+ }
1196
+
1197
+ /* If the position doesn't exist
1198
+ * (e.g. if you destroy the slider on a next click),
1199
+ * it doesn't throw an error.
1200
+ */
1201
+ if ("undefined" !== typeof(position)) {
1202
+ var value = slider.settings.mode == 'horizontal' ? -(position.left - moveBy) : -position.top;
1203
+ // plugin values to be animated
1204
+ setPositionProperty(value, 'slide', slider.settings.speed);
1205
+ }
1206
+ }
1207
+ }
1208
+
1209
+ /**
1210
+ * Transitions to the next slide in the show
1211
+ */
1212
+ el.goToNextSlide = function(){
1213
+ // if infiniteLoop is false and last page is showing, disregard call
1214
+ if (!slider.settings.infiniteLoop && slider.active.last) return;
1215
+ var pagerIndex = parseInt(slider.active.index) + 1;
1216
+ el.goToSlide(pagerIndex, 'next');
1217
+ }
1218
+
1219
+ /**
1220
+ * Transitions to the prev slide in the show
1221
+ */
1222
+ el.goToPrevSlide = function(){
1223
+ // if infiniteLoop is false and last page is showing, disregard call
1224
+ if (!slider.settings.infiniteLoop && slider.active.index == 0) return;
1225
+ var pagerIndex = parseInt(slider.active.index) - 1;
1226
+ el.goToSlide(pagerIndex, 'prev');
1227
+ }
1228
+
1229
+ /**
1230
+ * Starts the auto show
1231
+ *
1232
+ * @param preventControlUpdate (boolean)
1233
+ * - if true, auto controls state will not be updated
1234
+ */
1235
+ el.startAuto = function(preventControlUpdate){
1236
+ // if an interval already exists, disregard call
1237
+ if(slider.interval) return;
1238
+ // create an interval
1239
+ slider.interval = setInterval(function(){
1240
+ slider.settings.autoDirection == 'next' ? el.goToNextSlide() : el.goToPrevSlide();
1241
+ }, slider.settings.pause);
1242
+ // if auto controls are displayed and preventControlUpdate is not true
1243
+ if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('stop');
1244
+ }
1245
+
1246
+ /**
1247
+ * Stops the auto show
1248
+ *
1249
+ * @param preventControlUpdate (boolean)
1250
+ * - if true, auto controls state will not be updated
1251
+ */
1252
+ el.stopAuto = function(preventControlUpdate){
1253
+ // if no interval exists, disregard call
1254
+ if(!slider.interval) return;
1255
+ // clear the interval
1256
+ clearInterval(slider.interval);
1257
+ slider.interval = null;
1258
+ // if auto controls are displayed and preventControlUpdate is not true
1259
+ if (slider.settings.autoControls && preventControlUpdate != true) updateAutoControls('start');
1260
+ }
1261
+
1262
+ /**
1263
+ * Returns current slide index (zero-based)
1264
+ */
1265
+ el.getCurrentSlide = function(){
1266
+ return slider.active.index;
1267
+ }
1268
+
1269
+ /**
1270
+ * Returns current slide element
1271
+ */
1272
+ el.getCurrentSlideElement = function(){
1273
+ return slider.children.eq(slider.active.index);
1274
+ }
1275
+
1276
+ /**
1277
+ * Returns number of slides in show
1278
+ */
1279
+ el.getSlideCount = function(){
1280
+ return slider.children.length;
1281
+ }
1282
+
1283
+ /**
1284
+ * Update all dynamic slider elements
1285
+ */
1286
+ el.redrawSlider = function(){
1287
+ // resize all children in ratio to new screen size
1288
+ slider.children.add(el.find('.bx-clone')).width(getSlideWidth());
1289
+ // adjust the height
1290
+ slider.viewport.css('height', getViewportHeight());
1291
+ // update the slide position
1292
+ if(!slider.settings.ticker) setSlidePosition();
1293
+ // if active.last was true before the screen resize, we want
1294
+ // to keep it last no matter what screen size we end on
1295
+ if (slider.active.last) slider.active.index = getPagerQty() - 1;
1296
+ // if the active index (page) no longer exists due to the resize, simply set the index as last
1297
+ if (slider.active.index >= getPagerQty()) slider.active.last = true;
1298
+ // if a pager is being displayed and a custom pager is not being used, update it
1299
+ if(slider.settings.pager && !slider.settings.pagerCustom){
1300
+ populatePager();
1301
+ updatePagerActive(slider.active.index);
1302
+ }
1303
+ }
1304
+
1305
+ /**
1306
+ * Destroy the current instance of the slider (revert everything back to original state)
1307
+ */
1308
+ el.destroySlider = function(){
1309
+ // don't do anything if slider has already been destroyed
1310
+ if(!slider.initialized) return;
1311
+ slider.initialized = false;
1312
+ $('.bx-clone', this).remove();
1313
+ slider.children.each(function() {
1314
+ $(this).data("origStyle") != undefined ? $(this).attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1315
+ });
1316
+ $(this).data("origStyle") != undefined ? this.attr("style", $(this).data("origStyle")) : $(this).removeAttr('style');
1317
+ $(this).unwrap().unwrap();
1318
+ if(slider.controls.el) slider.controls.el.remove();
1319
+ if(slider.controls.next) slider.controls.next.remove();
1320
+ if(slider.controls.prev) slider.controls.prev.remove();
1321
+ if(slider.pagerEl && slider.settings.controls) slider.pagerEl.remove();
1322
+ $('.bx-caption', this).remove();
1323
+ if(slider.controls.autoEl) slider.controls.autoEl.remove();
1324
+ clearInterval(slider.interval);
1325
+ if(slider.settings.responsive) $(window).unbind('resize', resizeWindow);
1326
+ }
1327
+
1328
+ /**
1329
+ * Reload the slider (revert all DOM changes, and re-initialize)
1330
+ */
1331
+ el.reloadSlider = function(settings){
1332
+ if (settings != undefined) options = settings;
1333
+ el.destroySlider();
1334
+ init();
1335
+ }
1336
+
1337
+ init();
1338
+
1339
+ // returns the current jQuery object
1340
+ return this;
1341
+ }
1342
+
1343
+ })(jQuery);