https://www.verandajoye.be/scripts/jquery.superslides.js

1/*! Superslides - v0.6.2 - 2013-07-10
2* https://github.com/nicinabox/superslides
3* Copyright (c) 2013 Nic Aitch; Licensed MIT */
4(function(window, $) {
5
6var Superslides, plugin = 'superslides';
7
8Superslides = function(el, options) {
9  this.options = $.extend({
10    play: false,
11    animation_speed: 1500,
12    animation_easing: 'swing',
13    animation: 'slide',
14    inherit_width_from: window,
15    inherit_height_from: window,
16    pagination: true,
17    hashchange: false,
18    scrollable: true,
19    elements: {
20      preserve: '.preserve',
21      nav: '.slides-navigation',
22      container: '.slides-container',
23      pagination: '.slides-pagination'
24    }
25  }, options);
26
27  var that       = this,
28      $control   = $('<div>', { "class": 'slides-control' }),
29      multiplier = 1;
30
31  this.$el        = $(el);
32  this.$container = this.$el.find(this.options.elements.container);
33
34  // Private Methods
35  var initialize = function() {
36    multiplier = that._findMultiplier();
37
38    that.$el.on('click', that.options.elements.nav + " a", function(e) {
39      e.preventDefault();
40
41      that.stop();
42      if ($(this).hasClass('next')) {
43        that.animate('next', function() {
44          that.start();
45        });
46      } else {
47        that.animate('prev', function() {
48          that.start();
49        });
50      }
51    });
52
53    $(document).on('keyup', function(e) {
54      if (e.keyCode === 37) {
55        that.animate('prev');
56      }
57      if (e.keyCode === 39) {
58        that.animate('next');
59      }
60    });
61
62    $(window).on('resize', function() {
63      setTimeout(function() {
64        var $children = that.$container.children();
65
66        that.width  = that._findWidth();
67        that.height = that._findHeight();
68
69        $children.css({
70          width: that.width,
71          left: that.width
72        });
73
74        that.css.containers();
75        that.css.images();
76      }, 10);
77    });
78
79	if (that.options.hashchange) {
80		$(window).on('hashchange', function() {
81		  var hash = that._parseHash(), index;
82
83		  if (hash && !isNaN(hash)) {
84			// Minus 1 here because we don't want the url
85			// to be zero-indexed
86			index = that._upcomingSlide(hash - 1);
87
88		  } else {
89			index = that._upcomingSlide(hash);
90		  }
91
92		  if (index >= 0 && index !== that.current) {
93			that.animate(index);
94		  }
95		});
96	}
97    that.pagination._events();
98
99    that.start();
100    return that;
101  };
102
103var css = {
104  containers: function() {
105    if (that.init) {
106      that.$el.css({
107        height: that.height
108      });
109
110      that.$control.css({
111        width: that.width * multiplier,
112        left: -that.width
113      });
114
115      that.$container.css({
116
117      });
118    } else {
119      $('body').css({
120        margin: 0
121      });
122
123      that.$el.css({
124        position: 'relative',
125        overflow: 'hidden',
126        width: '100%',
127        height: that.height
128      });
129
130      that.$control.css({
131        position: 'relative',
132        transform: 'translate3d(0)',
133        height: '100%',
134        width: that.width * multiplier,
135        left: -that.width
136      });
137
138      that.$container.css({
139        display: 'none',
140        margin: '0',
141        padding: '0',
142        listStyle: 'none',
143        position: 'relative',
144        height: '100%'
145      });
146    }
147
148    if (that.size() === 1) {
149      that.$el.find(that.options.elements.nav).hide();
150    }
151  },
152  images: function() {
153    var $images = that.$container.find('img')
154                                 .not(that.options.elements.preserve)
155
156    $images.removeAttr('width').removeAttr('height')
157      .css({
158        "-webkit-backface-visibility": 'hidden',
159        "-ms-interpolation-mode": 'bicubic',
160        "position": 'absolute',
161        "left": '0',
162        "top": '0',
163        "z-index": '-1',
164        "max-width": 'none'
165      });
166
167    $images.each(function() {
168      var image_aspect_ratio = that.image._aspectRatio(this),
169          image = this;
170
171      if (!$.data(this, 'processed')) {
172        var img = new Image();
173        img.onload = function() {
174          that.image._scale(image, image_aspect_ratio);
175          that.image._center(image, image_aspect_ratio);
176          $.data(image, 'processed', true);
177        };
178        img.src = this.src;
179
180      } else {
181        that.image._scale(image, image_aspect_ratio);
182        that.image._center(image, image_aspect_ratio);
183      }
184    });
185  },
186  children: function() {
187    var $children = that.$container.children();
188
189    if ($children.is('img')) {
190      $children.each(function() {
191        if ($(this).is('img')) {
192          $(this).wrap('<div>');
193
194          // move id attribute
195          var id = $(this).attr('id');
196          $(this).removeAttr('id');
197          $(this).parent().attr('id', id);
198        }
199      });
200
201      $children = that.$container.children();
202    }
203
204    if (!that.init) {
205      $children.css({
206        display: 'none',
207        left: that.width * 2
208      });
209    }
210
211    $children.css({
212      position: 'absolute',
213      overflow: 'hidden',
214      height: '100%',
215      width: that.width,
216      top: 0,
217      zIndex: 0
218    });
219
220  }
221}
222
223var fx = {
224  slide: function(orientation, complete) {
225    var $children = that.$container.children(),
226        $target   = $children.eq(orientation.upcoming_slide);
227
228    $target.css({
229      left: orientation.upcoming_position,
230      display: 'block'
231    });
232
233    that.$control.animate({
234      left: orientation.offset
235    },
236    that.options.animation_speed,
237    that.options.animation_easing,
238    function() {
239      if (that.size() > 1) {
240        that.$control.css({
241          left: -that.width
242        });
243
244        $children.eq(orientation.upcoming_slide).css({
245          left: that.width,
246          zIndex: 2
247        });
248
249        if (orientation.outgoing_slide >= 0) {
250          $children.eq(orientation.outgoing_slide).css({
251            left: that.width,
252            display: 'none',
253            zIndex: 0
254          });
255        }
256      }
257
258      complete();
259    });
260  },
261  fade: function(orientation, complete) {
262    var that = this,
263        $children = that.$container.children(),
264        $outgoing = $children.eq(orientation.outgoing_slide),
265        $target = $children.eq(orientation.upcoming_slide);
266
267    $target.css({
268      left: this.width,
269      opacity: 1,
270      display: 'block'
271    });
272
273    if (orientation.outgoing_slide >= 0) {
274      $outgoing.animate({
275        opacity: 0
276      },
277      that.options.animation_speed,
278      that.options.animation_easing,
279      function() {
280        if (that.size() > 1) {
281          $children.eq(orientation.upcoming_slide).css({
282            zIndex: 2
283          });
284
285          if (orientation.outgoing_slide >= 0) {
286            $children.eq(orientation.outgoing_slide).css({
287              opacity: 1,
288              display: 'none',
289              zIndex: 0
290            });
291          }
292        }
293
294        complete();
295      });
296    } else {
297      $target.css({
298        zIndex: 2
299      });
300      complete();
301    }
302  }
303};
304
305fx = $.extend(fx, $.fn.superslides.fx);
306
307var image = {
308  _centerY: function(image) {
309    var $img = $(image);
310
311    $img.css({
312      top: (that.height - $img.height()) / 2
313    });
314  },
315  _centerX: function(image) {
316    var $img = $(image);
317
318    $img.css({
319      left: (that.width - $img.width()) / 2
320    });
321  },
322  _center: function(image) {
323    that.image._centerX(image);
324    that.image._centerY(image);
325  },
326  _aspectRatio: function(image) {

327    if (!image.naturalHeight && !image.naturalWidth) {
328      var img = new Image();
329      img.src = image.src;
330      image.naturalHeight = img.height;
331      image.naturalWidth = img.width;
332    }
333
334    return image.naturalHeight / image.naturalWidth;
335  },
336  _scale: function(image, image_aspect_ratio) {
337    image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image);
338
339    var container_aspect_ratio = that.height / that.width,
340        $img = $(image);
341
342    if (container_aspect_ratio > image_aspect_ratio) {
343      $img.css({
344        height: that.height,
345        width: that.height / image_aspect_ratio
346      });
347
348    } else {
349      $img.css({
350        height: that.width * image_aspect_ratio,
351        width: that.width
352      });
353    }
354  }
355};
356
357var pagination = {
358  _setCurrent: function(i) {
359    if (!that.$pagination) { return; }
360
361    var $pagination_children = that.$pagination.children();
362
363    $pagination_children.removeClass('current');
364    $pagination_children.eq(i)
365      .addClass('current');
366  },
367  _addItem: function(i) {
368    var slide_number = i + 1,
369        href = slide_number,
370        $slide = that.$container.children().eq(i),
371        slide_id = $slide.attr('id');
372
373    if (slide_id) {
374      href = slide_id;
375    }
376
377    var $item = $("<a>", {
378      'href': "#" + href,
379      'text': href
380    });
381
382    $item.appendTo(that.$pagination);
383  },
384  _setup: function() {
385    if (!that.options.pagination || that.size() === 1) { return; }
386
387    var $pagination = $("<nav>", {
388      'class': that.options.elements.pagination.replace(/^\./, '')
389    });
390
391    that.$pagination = $pagination.appendTo(that.$el);
392
393    for (var i = 0; i < that.size(); i++) {
394      that.pagination._addItem(i);
395    }
396  },
397  _events: function() {
398    that.$el.on('click', that.options.elements.pagination + ' a', function(e) {
399      e.preventDefault();
400
401      var hash  = that._parseHash(this.hash),
402          index = that._upcomingSlide(hash - 1);
403
404      if (index !== that.current) {
405        that.animate(index, function() {
406          that.start();
407        });
408      }
409    });
410  }
411};
412
413  this.css = css;
414  this.image = image;
415  this.pagination = pagination;
416  this.fx = fx;
417  this.animation = this.fx[this.options.animation];
418
419  this.$control = this.$container.wrap($control).parent('.slides-control');
420
421  that._findPositions();
422  that.width  = that._findWidth();
423  that.height = that._findHeight();
424
425  this.css.children();
426  this.css.containers();
427  this.css.images();
428  this.pagination._setup();
429
430  return initialize();
431};
432
433Superslides.prototype = {
434  _findWidth: function() {
435    return $(this.options.inherit_width_from).width();
436  },
437  _findHeight: function() {
438    return $(this.options.inherit_height_from).height();
439  },
440
441  _findMultiplier: function() {
442    return this.size() === 1 ? 1 : 3;
443  },
444
445  _upcomingSlide: function(direction) {
446    if ((/next/).test(direction)) {
447      return this._nextInDom();
448
449    } else if ((/prev/).test(direction)) {
450      return this._prevInDom();
451
452    } else if ((/\d/).test(direction)) {
453      return +direction;
454
455    } else if (direction && (/\w/).test(direction)) {
456      var index = this._findSlideById(direction);
457      if (index >= 0) {
458        return index;
459      } else {
460        return 0;
461      }
462
463    } else {
464      return 0;
465    }
466  },
467
468  _findSlideById: function(id) {
469    return this.$container.find('#' + id).index();
470  },
471
472  _findPositions: function(current, thisRef) {
473    thisRef = thisRef || this;
474
475    if (current === undefined) {
476      current = -1;
477    }
478
479    thisRef.current = current;
480    thisRef.next    = thisRef._nextInDom();
481    thisRef.prev    = thisRef._prevInDom();
482  },
483
484  _nextInDom: function() {
485    var index = this.current + 1;
486
487    if (index === this.size()) {
488      index = 0;
489    }
490
491    return index;
492  },
493
494  _prevInDom: function() {
495    var index = this.current - 1;
496
497    if (index < 0) {
498      index = this.size() - 1;
499    }
500
501    return index;
502  },
503
504  _parseHash: function(hash) {
505    hash = hash || window.location.hash;
506    hash = hash.replace(/^#/, '');
507
508    if (hash && !isNaN(+hash)) {
509      hash = +hash;
510    }
511
512    return hash;
513  },
514
515  size: function() {
516    return this.$container.children().length;
517  },
518
519  destroy: function() {
520    return this.$el.removeData();
521  },
522
523  update: function() {
524    this.css.children();
525    this.css.containers();
526    this.css.images();
527
528    this.pagination._addItem(this.size())
529
530    this._findPositions(this.current);
531    this.$el.trigger('updated.slides');
532  },
533
534  stop: function() {
535    clearInterval(this.play_id);
536    delete this.play_id;
537
538    this.$el.trigger('stopped.slides');
539  },
540
541  start: function() {
542    var that = this;
543
544    if (that.options.hashchange) {
545      $(window).trigger('hashchange');
546    } else {
547      this.animate();
548    }
549
550    if (this.options.play) {
551      if (this.play_id) {
552        this.stop();
553      }
554
555      this.play_id = setInterval(function() {
556        that.animate();
557      }, this.options.play);
558    }
559
560    this.$el.trigger('started.slides');
561  },
562
563  animate: function(direction, userCallback) {
564    var that = this,
565        orientation = {};
566
567    if (this.animating) {
568      return;
569    }
570
571    this.animating = true;
572
573    if (direction === undefined) {

574      direction = 'next';
575    }
576
577    orientation.upcoming_slide = this._upcomingSlide(direction);
578
579    if (orientation.upcoming_slide >= this.size()) {
580      return;
581    }
582
583    orientation.outgoing_slide    = this.current;
584    orientation.upcoming_position = this.width * 2;
585    orientation.offset            = -orientation.upcoming_position;
586
587    if (direction === 'prev' || direction < orientation.outgoing_slide) {
588      orientation.upcoming_position = 0;
589      orientation.offset            = 0;
590    }
591
592    if (that.size() > 1) {
593      that.pagination._setCurrent(orientation.upcoming_slide);
594    }
595
596    if (that.options.hashchange) {
597      var hash = orientation.upcoming_slide + 1,
598          id = that.$container.children(':eq(' + orientation.upcoming_slide + ')').attr('id');
599
600      if (id) {
601        window.location.hash = id;
602      } else {
603        window.location.hash = hash;
604      }
605    }
606
607    that.$el.trigger('animating.slides', [orientation]);
608
609    that.animation(orientation, function() {
610      that._findPositions(orientation.upcoming_slide, that);
611
612      if (typeof userCallback === 'function') {
613        userCallback();
614      }
615
616      that.animating = false;
617      that.$el.trigger('animated.slides');
618
619      if (!that.init) {
620        that.$el.trigger('init.slides');
621        that.init = true;
622        that.$container.fadeIn('fast');
623      }
624    });
625  }
626};
627
628// jQuery plugin definition
629
630$.fn[plugin] = function(option, args) {
631  var result = [];
632
633  this.each(function() {
634    var $this, data, options;
635
636    $this = $(this);
637    data = $this.data(plugin);
638    options = typeof option === 'object' && option;
639
640    if (!data) {
641      result = $this.data(plugin, (data = new Superslides(this, options)));
642    }
643
644    if (typeof option === "string") {
645      result = data[option];
646      if (typeof result === 'function') {
647        return result = result.call(data, args);
648      }
649    }
650  });
651
652  return result;
653};
654
655$.fn[plugin].fx = {};
656
657})(this, jQuery);