jquery.backstretch.js

/*! Backstretch - v2.1.1 - 2015-05-8
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2015 Scott Robbin; Licensed MIT */

;(function ($, window, undefined) {
  'use strict';

    $.fn.backstretch = function (images, options) {
    // We need at least one image or method name
    if (images === undefined || images === null || images.length === 0) {
      console.debug("Warning: No images were supplied for Backstretch");
    }

        if ($(window).scrollTop() === 0 ) {
      window.scrollTo(0, 0);
    }

    return this.each(function () {
      var $this = $(this)
        , obj = $this.data('backstretch');

      // Do we already have an instance attached to this element?
      if (obj) {

        // Is this a method they're trying to execute?
        if (typeof images === 'string' && typeof obj[images] === 'function') {
          // Call the method
          obj[images](options);

          // No need to do anything further
          return;
        }

        // Merge the old options with the new
        options = $.extend(obj.options, options);

        // Remove the old instance
        obj.destroy(true);
      }

      obj = new Backstretch(this, images, options);
      $this.data('backstretch', obj);
    });
  };

  // If no element is supplied, we'll attach to body
  $.backstretch = function (images, options) {
    // Return the instance
    return $('body')
            .backstretch(images, options)
            .data('backstretch');
  };

  // Custom selector
  $.expr[':'].backstretch = function(elem) {
    return $(elem).data('backstretch') !== undefined;
  };

    $.fn.backstretch.defaults = {
      centeredX: true   // Should we center the image on the X axis?
    , centeredY: true   // Should we center the image on the Y axis?
    , duration: 5000    // Amount of time in between slides (if slideshow)
    , fade: 0           // Speed of fade transition between slides
    , bleed: 0          // The amount by which to bleed the backstretch image
    , parallax: false   // Adds a parallax effect when scrolling to backstretch images
  };

    var styles = {
      wrap: {
          left: 0
        , top: 0
        , overflow: 'hidden'
        , margin: 0
        , padding: 0
        , height: '100%'
        , width: '100%'
        , zIndex: -999999
      }
    , img: {
          position: 'absolute'
        , display: 'none'
        , margin: 0
        , padding: 0
        , border: 'none'
        , width: 'auto'
        , height: 'auto'
        , maxHeight: 'none'
        , maxWidth: 'none'
        , zIndex: -999999
      }
  };

    var Backstretch = function (container, images, options) {
    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});

    // If Parallax is turned on, force centeredY to false
    if (this.options.parallax) {
      this.options.centeredY = false;
    }

        this.images = $.isArray(images) ? images : [images];

    this.$window = $(window);

    // Preload images
    $.each(this.images, function () {
      $('<img />')[0].src = this;
    });

    // Convenience reference to know if the container is body.
    this.isBody = container === document.body;

        this.$container = $(container);
    this.$root = this.isBody ? supportsFixedPosition ? $(window) : $(document) : this.$container;

    // Don't create a new wrap if one already exists (from a previous instance of Backstretch)
    var $existing = this.$container.children(".backstretch").first();
    this.$wrap = $existing.length ? $existing : $('<div class="backstretch"></div>').css(styles.wrap).appendTo(this.$container);

    // Non-body elements need some style adjustments
    if (!this.isBody) {
      // If the container is statically positioned, we need to make it relative,
      // and if no zIndex is defined, we should set it to zero.
      var position = this.$container.css('position')
        , zIndex = this.$container.css('zIndex');

      this.$container.css({
          position: position === 'static' ? 'relative' : position
        , zIndex: zIndex === 'auto' ? 0 : zIndex
        , background: 'none'
      });

      // Needs a higher z-index
      this.$wrap.css({zIndex: -999998});

      // If we have a bleed set, position the wrapper accordingling and make the
      // container hide overflow
      if (this.options.bleed > 0) {
        this.$container.css('overflow', 'hidden');
        this.$wrap.css({top: -1 * this.options.bleed, left: -1 * this.options.bleed});
      }
    }

    // Fixed or absolute positioning?
    this.$wrap.css({
      position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute'
    });

    // Set the first image
    this.index = 0;
    this.show(this.index);

    // Listen for resize
    this.$window.on('resize.backstretch', $.proxy(this.resize, this))
             .on('orientationchange.backstretch', $.proxy(function () {
                // Need to do this in order to get the right window height
                if (this.isBody && window.pageYOffset === 0) {
                  window.scrollTo(0, 1);
                  this.resize();
                }
             }, this));

  };

    Backstretch.prototype = {
      resize: function () {
        try {
          var self = this;

          this.bgCSS = {left: 0, top: 0};
          this.rootWidth = this.isBody ? this.$root.width() : ( this.$root.innerWidth() + this.options.bleed * 2 );
          this.bgWidth = this.rootWidth;
          this.rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : ( this.$root.innerHeight() + ( this.options.bleed * 2 ) );
          this.bgHeight = this.bgWidth / this.$img.data('ratio');
          this.bgOffset = 0;

            // Make adjustments based on image ratio
            if (this.bgHeight >= this.rootHeight) {
                if(this.options.parallax && !this.isBody) {
                  this.bgOffset = this.rootHeight - this.bgHeight;
                  this.bgCSS.top = this.bgOffset + 'px';
                } else if(this.options.centeredY) {
                  this.bgOffset = -1 * (this.bgHeight - this.rootHeight) / 2;
                  this.bgCSS.top = this.bgOffset + 'px';
                } else {
                  this.bgOffset = 0;
                }
            } else {
                this.bgHeight = this.rootHeight;
                this.bgWidth = this.bgHeight * this.$img.data('ratio');
                if(this.options.centeredX) {
                  this.bgOffset = (this.bgWidth - this.rootWidth) / 2;
                  this.bgCSS.left = '-' + this.bgOffset + 'px';
                }
            }

            this.$wrap.css({width: this.rootWidth, height: this.rootHeight})
                      .find('img:not(.deleteable)').css({width: this.bgWidth, height: this.bgHeight}).css(this.bgCSS);

            if (this.options.parallax && !this.isBody) {
              if (this.bgHeight > this.rootHeight) {
                // Call parallax() once to set currently visible elements
                this.parallax();

                // Call parallax on scroll
                this.$window.scroll(function(){
                  self.parallax();
                });
              }
            }

            if (this.options.parallax && this.isBody) {
              console.warn('Warning: Parallax cannot be applied to $.backstretch elements.');
            }

        } catch(err) {
            // IE7 seems to trigger resize before the image is loaded.
            // This try/catch block is a hack to let it fail gracefully.
        }

        return this;
      }

    , parallax: function () {

        this.isVisible = false;
        this.pos = this.$root.offset().top - this.$window.scrollTop();

        var viewArea = this.$window.height() + this.rootHeight
        ,   distance = this.bgHeight - this.rootHeight;

        // Determine if the backstretch instance is in the viewport
        if (this.pos < this.$window.height() && this.pos + this.$root.outerHeight() > 0) {
          this.isVisible = true;
          this.bgCSS.top = -1 * ( this.pos + this.rootHeight ) / viewArea * distance;
          this.$wrap.find('img:not(.deleteable)').css(this.bgCSS);
        }

      }

      // Show the slide at a certain position
    , show: function (newIndex) {

        // Validate index
        if (Math.abs(newIndex) > this.images.length - 1) {
          return;
        }

        // Vars
        var self = this
          , oldImage = self.$wrap.find('img').addClass('deleteable')
          , evtOptions = { relatedTarget: self.$container[0] };

        // Trigger the "before" event
        self.$container.trigger($.Event('backstretch.before', evtOptions), [self, newIndex]);

        // Set the new index
        this.index = newIndex;

        // Pause the slideshow
        clearInterval(self.interval);

        // New image
        self.$img = $('<img />')
                      .css(styles.img)
                      .bind('load', function (e) {
                        var imgWidth = this.width || $(e.target).width()
                          , imgHeight = this.height || $(e.target).height();

                        // Save the ratio
                        $(this).data('ratio', imgWidth / imgHeight);

                        // Show the image, then delete the old one
                        // "speed" option has been deprecated, but we want backwards compatibilty
                        $(this).fadeIn(self.options.speed || self.options.fade, function () {
                          oldImage.remove();

                          // Resume the slideshow
                          if (!self.paused) {
                            self.cycle();
                          }

                          // Trigger the "after" and "show" events
                          // "show" is being deprecated
                          $(['after', 'show']).each(function () {
                            self.$container.trigger($.Event('backstretch.' + this, evtOptions), [self, newIndex]);
                          });
                        });

                        // Resize
                        self.resize();
                      })
                      .appendTo(self.$wrap);

        // Hack for IE img onload event
        self.$img.attr('src', self.images[newIndex]);
        return self;
      }

    , next: function () {
        // Next slide
        return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
      }

    , prev: function () {
        // Previous slide
        return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1);
      }

    , pause: function () {
        // Pause the slideshow
        this.paused = true;
        return this;
      }

    , resume: function () {
        // Resume the slideshow
        this.paused = false;
        this.next();
        return this;
      }

    , cycle: function () {
        // Start/resume the slideshow
        if(this.images.length > 1) {
          // Clear the interval, just in case
          clearInterval(this.interval);

          this.interval = setInterval($.proxy(function () {
            // Check for paused slideshow
            if (!this.paused) {
              this.next();
            }
          }, this), this.options.duration);
        }
        return this;
      }

    , destroy: function (preserveBackground) {
        // Stop the resize events
        $(window).off('resize.backstretch orientationchange.backstretch');

        // Clear the interval
        clearInterval(this.interval);

        // Remove Backstretch
        if(!preserveBackground) {
          this.$wrap.remove();
        }
        this.$container.removeData('backstretch');
      }
  };

    var supportsFixedPosition = (function () {
    var ua = navigator.userAgent
      , platform = navigator.platform
        // Rendering engine is Webkit, and capture major version
      , wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ )
      , wkversion = !!wkmatch && wkmatch[ 1 ]
      , ffmatch = ua.match( /Fennec\/([0-9]+)/ )
      , ffversion = !!ffmatch && ffmatch[ 1 ]
      , operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ )
      , omversion = !!operammobilematch && operammobilematch[ 1 ]
      , iematch = ua.match( /MSIE ([0-9]+)/ )
      , ieversion = !!iematch && iematch[ 1 ];

    return !(
      // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
      ((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) ||

      // Opera Mini
      (window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") ||
      (operammobilematch && omversion < 7458) ||

      //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
      (ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) ||

      // Firefox Mobile before 6.0 -
      (ffversion && ffversion < 6) ||

      // WebOS less than 3
      ("palmGetResource" in window && wkversion && wkversion < 534) ||

      // MeeGo
      (ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) ||

      // IE6
      (ieversion && ieversion <= 6)
    );
  }());

}(jQuery, window));