https://piccolos157.com/js/jquery.backstretch.js

1/*� * Backstretch� * http://srobbin.com/jquery-plugins/backstretch/� *� * Copyright (c) 2013 Scott Robbin� * Licensed under the MIT license.� */��;(function ($, window, undefined) {�  'use strict';��  /* PLUGIN DEFINITION�   * ========================= */��  $.fn.backstretch = function (images, options) {�    // We need at least one image or method name�    if (images === undefined || images.length === 0) {�      $.error("No images were supplied for Backstretch");�    }��    /*�     * Scroll the page one pixel to get the right window height on iOS�     * Pretty harmless for everyone else�    */�    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;�  };��  /* DEFAULTS�   * ========================= */��  $.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�  };��  /* STYLES�   * �   * Baked-in styles that we'll apply to our elements.�   * In an effort to keep the plugin simple, these are not exposed as options.�   * That said, anyone can override these in their own stylesheet.�   * ========================= */�  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�      }�  };��  /* CLASS DEFINITION�   * ========================= */�  var Backstretch = function (container, images, options) {�    this.options = $.extend({}, $.fn.backstretch.defaults, options || {});��    /* In its simplest form, we allow Backstretch to be called on an image path.�     * e.g. $.backstretch('/path/to/image.jpg')�     * So, we need to turn this back into an array.�     */�    this.images = $.isArray(images) ? images : [images];��    // Preload images�    $.each(this.images, function () {�      $('<img alt="Background Image" />')[0].src = this;�    });    ��    // Convenience reference to know if the container is body.�    this.isBody = container === document.body;��    /* We're keeping track of a few different elements�     *�     * Container: the element that Backstretch was called on.�     * Wrap: a DIV that we place the image into, so we can hide the overflow.�     * Root: Convenience reference to help calculate the correct height.�     */�    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});�    }��    // 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�    $(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));�  };��  /* PUBLIC METHODS�   * ========================= */�  Backstretch.prototype = {�      resize: function () {�        try {�          var bgCSS = {left: 0, top: 0}�            , rootWidth = this.isBody ? this.$root.width() : this.$root.innerWidth()�            , bgWidth = rootWidth�            , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHe

1ight()�            , bgHeight = bgWidth / this.$img.data('ratio')�            , bgOffset;��            // Make adjustments based on image ratio�            if (bgHeight >= rootHeight) {�                bgOffset = (bgHeight - rootHeight) / 2;�                if(this.options.centeredY) {�                  bgCSS.top = '-' + bgOffset + 'px';�                }�            } else {�                bgHeight = rootHeight;�                bgWidth = bgHeight * this.$img.data('ratio');�                bgOffset = (bgWidth - rootWidth) / 2;�                if(this.options.centeredX) {�                  bgCSS.left = '-' + bgOffset + 'px';�                }�            }��            this.$wrap.css({width: rootWidth, height: rootHeight})�                      .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS);�        } 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;�      }��      // 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 alt="Background Image" />')�                      .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;�      }

1��    , 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');�      }�  };��  /* SUPPORTS FIXED POSITION?�   *�   * Based on code from jQuery Mobile 1.1.0�   * http://jquerymobile.com/�   *�   * In a nutshell, we need to figure out if fixed positioning is supported.�   * Unfortunately, this is very difficult to do on iOS, and usually involves�   * injecting content, scrolling the page, etc.. It's ugly.�   * jQuery Mobile uses this workaround. It's not ideal, but works.�   *�   * Modified to detect IE6�   * ========================= */��  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));