/components/foundation/javascripts/jquery.foundation.orbit.js
JavaScript | 897 lines | 723 code | 116 blank | 58 comment | 130 complexity | 7bfee2cb6a002dc84e5301f0a386a4a0 MD5 | raw file
- /*
- * jQuery Orbit Plugin 1.4.0
- * www.ZURB.com/playground
- * Copyright 2010, ZURB
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- */
- (function ($) {
- 'use strict';
- $.fn.findFirstImage = function () {
- return this.first()
- .find('img')
- .andSelf().filter('img')
- .first();
- };
- var ORBIT = {
- defaults: {
- animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push, vertical-push
- animationSpeed: 600, // how fast animations are
- timer: true, // display timer?
- advanceSpeed: 4000, // if timer is enabled, time between transitions
- pauseOnHover: false, // if you hover pauses the slider
- startClockOnMouseOut: false, // if clock should start on MouseOut
- startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
- directionalNav: true, // manual advancing directional navs
- directionalNavRightText: 'Right', // text of right directional element for accessibility
- directionalNavLeftText: 'Left', // text of left directional element for accessibility
- captions: true, // do you want captions?
- captionAnimation: 'fade', // fade, slideOpen, none
- captionAnimationSpeed: 600, // if so how quickly should they animate in
- resetTimerOnClick: false, // true resets the timer instead of pausing slideshow progress on manual navigation
- bullets: false, // true or false to activate the bullet navigation
- bulletThumbs: false, // thumbnails for the bullets
- bulletThumbLocation: '', // relative path to thumbnails from this file
- afterSlideChange: $.noop, // callback to execute after slide changes
- afterLoadComplete: $.noop, // callback to execute after everything has been loaded
- fluid: true,
- centerBullets: true, // center bullet nav with js, turn this off if you want to position the bullet nav manually
- singleCycle: false, // cycles through orbit slides only once
- slideNumber: false, // display slide numbers?
- stackOnSmall: false // stack slides on small devices (i.e. phones)
- },
- activeSlide: 0,
- numberSlides: 0,
- orbitWidth: null,
- orbitHeight: null,
- locked: null,
- timerRunning: null,
- degrees: 0,
- wrapperHTML: '<div class="orbit-wrapper" />',
- timerHTML: '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>',
- captionHTML: '<div class="orbit-caption"></div>',
- directionalNavHTML: '<div class="slider-nav hide-for-small"><span class="right"></span><span class="left"></span></div>',
- bulletHTML: '<ul class="orbit-bullets"></ul>',
- slideNumberHTML: '<span class="orbit-slide-counter"></span>',
- init: function (element, options) {
- var $imageSlides,
- imagesLoadedCount = 0,
- self = this;
- // Bind functions to correct context
- this.clickTimer = $.proxy(this.clickTimer, this);
- this.addBullet = $.proxy(this.addBullet, this);
- this.resetAndUnlock = $.proxy(this.resetAndUnlock, this);
- this.stopClock = $.proxy(this.stopClock, this);
- this.startTimerAfterMouseLeave = $.proxy(this.startTimerAfterMouseLeave, this);
- this.clearClockMouseLeaveTimer = $.proxy(this.clearClockMouseLeaveTimer, this);
- this.rotateTimer = $.proxy(this.rotateTimer, this);
- this.options = $.extend({}, this.defaults, options);
- if (this.options.timer === 'false') this.options.timer = false;
- if (this.options.captions === 'false') this.options.captions = false;
- if (this.options.directionalNav === 'false') this.options.directionalNav = false;
- this.$element = $(element);
- this.$wrapper = this.$element.wrap(this.wrapperHTML).parent();
- this.$slides = this.$element.children('img, a, div, figure');
- this.$element.on('movestart', function(e) {
- // If the movestart is heading off in an upwards or downwards
- // direction, prevent it so that the browser scrolls normally.
- if ((e.distX > e.distY && e.distX < -e.distY) ||
- (e.distX < e.distY && e.distX > -e.distY)) {
- e.preventDefault();
- }
- });
- this.$element.bind('orbit.next swipeleft', function () {
- self.shift('next');
- });
- this.$element.bind('orbit.prev swiperight', function () {
- self.shift('prev');
- });
- this.$element.bind('orbit.goto', function (event, index) {
- self.shift(index);
- });
- this.$element.bind('orbit.start', function (event, index) {
- self.startClock();
- });
- this.$element.bind('orbit.stop', function (event, index) {
- self.stopClock();
- });
- $imageSlides = this.$slides.filter('img');
- if ($imageSlides.length === 0) {
- this.loaded();
- } else {
- $imageSlides.bind('imageready', function () {
- imagesLoadedCount += 1;
- if (imagesLoadedCount === $imageSlides.length) {
- self.loaded();
- }
- });
- }
- },
- loaded: function () {
- this.$element
- .addClass('orbit')
- .css({width: '1px', height: '1px'});
- if (this.options.stackOnSmall) {
- this.$element.addClass('orbit-stack-on-small');
- }
- this.$slides.addClass('orbit-slide');
- this.setDimentionsFromLargestSlide();
- this.updateOptionsIfOnlyOneSlide();
- this.setupFirstSlide();
- this.notifySlideChange();
- if (this.options.timer) {
- this.setupTimer();
- this.startClock();
- }
- if (this.options.captions) {
- this.setupCaptions();
- }
- if (this.options.directionalNav) {
- this.setupDirectionalNav();
- }
- if (this.options.bullets) {
- this.setupBulletNav();
- this.setActiveBullet();
- }
- this.options.afterLoadComplete.call(this);
- Holder.run();
- },
- currentSlide: function () {
- return this.$slides.eq(this.activeSlide);
- },
- notifySlideChange: function() {
- if (this.options.slideNumber) {
- var txt = (this.activeSlide+1) + ' of ' + this.$slides.length;
- this.$element.trigger("orbit.change", {slideIndex: this.activeSlide, slideCount: this.$slides.length});
- if (this.$counter === undefined) {
- var $counter = $(this.slideNumberHTML).html(txt);
- this.$counter = $counter;
- this.$wrapper.append(this.$counter);
- } else {
- this.$counter.html(txt);
- }
- }
- },
- setDimentionsFromLargestSlide: function () {
- //Collect all slides and set slider size of largest image
- var self = this,
- $fluidPlaceholder;
- self.$element.add(self.$wrapper).width(this.$slides.first().outerWidth());
- self.$element.add(self.$wrapper).height(this.$slides.first().height());
- self.orbitWidth = this.$slides.first().outerWidth();
- self.orbitHeight = this.$slides.first().height();
- $fluidPlaceholder = this.$slides.first().findFirstImage().clone();
- this.$slides.each(function () {
- var slide = $(this),
- slideWidth = slide.outerWidth(),
- slideHeight = slide.height();
- if (slideWidth > self.$element.outerWidth()) {
- self.$element.add(self.$wrapper).width(slideWidth);
- self.orbitWidth = self.$element.outerWidth();
- }
- if (slideHeight > self.$element.height()) {
- self.$element.add(self.$wrapper).height(slideHeight);
- self.orbitHeight = self.$element.height();
- $fluidPlaceholder = $(this).findFirstImage().clone();
- }
- self.numberSlides += 1;
- });
- if (this.options.fluid) {
- if (typeof this.options.fluid === "string") {
- // $fluidPlaceholder = $("<img>").attr("src", "http://placehold.it/" + this.options.fluid);
- $fluidPlaceholder = $("<img>").attr("data-src", "holder.js/" + this.options.fluid);
- //var inner = $("<div/>").css({"display":"inline-block", "width":"2px", "height":"2px"});
- //$fluidPlaceholder = $("<div/>").css({"float":"left"});
- //$fluidPlaceholder.wrapInner(inner);
- //$fluidPlaceholder = $("<div/>").css({"height":"1px", "width":"2px"});
- //$fluidPlaceholder = $("<div style='display:inline-block;width:2px;height:1px;'></div>");
- }
- self.$element.prepend($fluidPlaceholder);
- $fluidPlaceholder.addClass('fluid-placeholder');
- self.$element.add(self.$wrapper).css({width: 'inherit'});
- self.$element.add(self.$wrapper).css({height: 'inherit'});
- $(window).bind('resize', function () {
- self.orbitWidth = self.$element.outerWidth();
- self.orbitHeight = self.$element.height();
- });
- }
- },
- //Animation locking functions
- lock: function () {
- this.locked = true;
- },
- unlock: function () {
- this.locked = false;
- },
- updateOptionsIfOnlyOneSlide: function () {
-