1/* 2 * Backstretch 3 * http://srobbin.com/jquery-plugins/backstretch/ 4 * 5 * Copyright (c) 2013 Scott Robbin 6 * Licensed under the MIT license. 7 */ 8 9;(function ($, window, undefined) { 10 'use strict'; 11 12 /* PLUGIN DEFINITION 13 * ========================= */ 14 15 $.fn.backstretch = function (images, options) { 16 17 /* 18 * Scroll the page one pixel to get the right window height on iOS 19 * Pretty harmless for everyone else 20 */ 21 if ($(window).scrollTop() === 0 ) { 22 window.scrollTo(0, 0); 23 } 24 25 return this.each(function () { 26 var $this = $(this) 27 , obj = $this.data('backstretch'); 28 29 // Do we already have an instance attached to this element? 30 if (obj) { 31 32 // Is this a method they're trying to execute? 33 if (typeof images == 'string' && typeof obj[images] == 'function') { 34 // Call the method 35 obj[images](options); 36 37 // No need to do anything further 38 return; 39 } 40 41 // Merge the old options with the new 42 options = $.extend(obj.options, options); 43 44 // Remove the old instance 45 obj.destroy(true); 46 } 47 48 // We need at least one image 49 if (images === undefined) { 50 if ($this.css('backgroundImage')) { 51 images = [$this.css('backgroundImage').replace(/url\(|\)|"|'/g,"")]; 52 } else { 53 $.error('No images were supplied for Backstretch, or element must have a CSS-defined background image.'); 54 } 55 } 56 57 obj = new Backstretch(this, images, options); 58 $this.data('backstretch', obj); 59 }); 60 }; 61 62 // If no element is supplied, we'll attach to body 63 $.backstretch = function (images, options) { 64 // Return the instance 65 return $('body') 66 .backstretch(images, options) 67 .data('backstretch'); 68 }; 69 70 // Custom selector 71 $.expr[':'].backstretch = function(elem) { 72 return $(elem).data('backstretch') !== undefined; 73 }; 74 75 /* DEFAULTS 76 * ========================= */ 77 78 $.fn.backstretch.defaults = { 79 centeredX: true // Should we center the image on the X axis? 80 , centeredY: true // Should we center the image on the Y axis? 81 , duration: 5000 // Amount of time in between slides (if slideshow) 82 , fade: 0 // Speed of fade transition between slides 83 }; 84 85 /* STYLES 86 * 87 * Baked-in styles that we'll apply to our elements. 88 * In an effort to keep the plugin simple, these are not exposed as options. 89 * That said, anyone can override these in their own stylesheet. 90 * ========================= */ 91 var styles = { 92 wrap: { 93 left: 0 94 , top: 0 95 , overflow: 'hidden' 96 , margin: 0 97 , padding: 0 98 , height: '100%' 99 , width: '100%' 100 , zIndex: -999999 101 } 102 , img: { 103 position: 'absolute' 104 , display: 'none' 105 , margin: 0 106 , padding: 0 107 , border: 'none' 108 , width: 'auto' 109 , height: 'auto' 110 , maxWidth: 'none' 111 , zIndex: -999999 112 } 113 }; 114 115 /* CLASS DEFINITION 116 * ========================= */ 117 var Backstretch = function (container, images, options) { 118 this.options = $.extend({}, $.fn.backstretch.defaults, options || {}); 119 120 121 /* In its simplest form, we allow Backstretch to be called on an image path. 122 * e.g. $.backstretch('/path/to/image.jpg') 123 * So, we need to turn this back into an array. 124 */ 125 this.images = $.isArray(images) ? images : [images]; 126 127 // Preload images 128 $.each(this.images, function () { 129 $('<img />')[0].src = this; 130 }); 131 132 // Convenience reference to know if the container is body. 133 this.isBody = container === document.body; 134 135 /* We're keeping track of a few different elements 136 * 137 * Container: the element that Backstretch was called on. 138 * Wrap: a DIV that we place the image into, so we can hide the overflow. 139 * Root: Convenience reference to help calculate the correct height. 140 */ 141 this.$container = $(container); 142 this.$root = this.isBody ? supportsFixedPosition ? $(window) : $(document) : this.$container; 143 144 // Don't create a new wrap if one already exists (from a previous instance of Backstretch) 145 var $existing = this.$container.children(".backstretch").first(); 146 this.$wrap = $existing.length ? $existing : $('<div class="backstretch"></div>').css(styles.wrap).appendTo(this.$container); 147 148 // Non-body elements need some style adjustments 149 if (!this.isBody) { 150 // If the container is statically positioned, we need to make it relative, 151 // and if no zIndex is defined, we should set it to zero. 152 var position = this.$container.css('position') 153 , zIndex = this.$container.css('zIndex'); 154 155 this.$container.css({ 156 position: position === 'static' ? 'relative' : position 157 , zIndex: zIndex === 'auto' ? 0 : zIndex 158 , background: 'none' 159 }); 160 161 // Needs a higher z-index 162 this.$wrap.css({zIndex: -999998}); 163 } 164 165 // Fixed or absolute positioning? 166 this.$wrap.css({ 167 position: this.isBody && supportsFixedPosition ? 'fixed' : 'absolute' 168 }); 169 170 // Set the first image 171 this.index = 0; 172 this.show(this.index); 173 174 // Listen for resize 175 $(window).on('resize.backstretch', $.proxy(this.resize, this)) 176 .on('orientationchange.backstretch', $.proxy(function () { 177 // Need to do this in order to get the right window height 178 if (this.isBody && window.pageYOffset === 0) { 179 window.scrollTo(0, 1); 180 this.resize(); 181 } 182 }, this)); 183 }; 184 185 /* PUBLIC METHODS 186 * ========================= */ 187 Backstretch.prototype = { 188 resize: function () { 189 try { 190 var bgCSS = {left: 0, top: 0} 191 , rootWidth = this.isBody ? this.$root.width() : this.$root.innerWidth() 192 , bgWidth = rootWidth 193 , rootHeight = this.isBody ? ( window.innerHeight ? window.innerHeight : this.$root.height() ) : this.$root.innerHe
193ight() 194 , bgHeight = bgWidth / this.$img.data('ratio') 195 , bgOffset; 196 197 // Make adjustments based on image ratio 198 if (bgHeight >= rootHeight) { 199 bgOffset = (bgHeight - rootHeight) / 2; 200 if(this.options.centeredY) { 201 bgCSS.top = '-' + bgOffset + 'px'; 202 } 203 } else { 204 bgHeight = rootHeight; 205 bgWidth = bgHeight * this.$img.data('ratio'); 206 bgOffset = (bgWidth - rootWidth) / 2; 207 if(this.options.centeredX) { 208 bgCSS.left = '-' + bgOffset + 'px'; 209 } 210 } 211 212 this.$wrap.css({width: rootWidth, height: rootHeight}) 213 .find('img:not(.deleteable)').css({width: bgWidth, height: bgHeight}).css(bgCSS); 214 } catch(err) { 215 // IE7 seems to trigger resize before the image is loaded. 216 // This try/catch block is a hack to let it fail gracefully. 217 } 218 219 return this; 220 } 221 222 // Show the slide at a certain position 223 , show: function (newIndex) { 224 225 // Validate index 226 if (Math.abs(newIndex) > this.images.length - 1) { 227 return; 228 } 229 230 // Vars 231 var self = this 232 , oldImage = self.$wrap.find('img').addClass('deleteable') 233 , evtOptions = { relatedTarget: self.$container[0] }; 234 235 // Trigger the "before" event 236 self.$container.trigger($.Event('backstretch.before', evtOptions), [self, newIndex]); 237 238 // Set the new index 239 this.index = newIndex; 240 241 // Pause the slideshow 242 clearInterval(self.interval); 243 244 // New image 245 self.$img = $('<img />') 246 .css(styles.img) 247 .bind('load', function (e) { 248 var imgWidth = this.width || $(e.target).width() 249 , imgHeight = this.height || $(e.target).height(); 250 251 // Save the ratio 252 $(this).data('ratio', imgWidth / imgHeight); 253 254 // Show the image, then delete the old one 255 // "speed" option has been deprecated, but we want backwards compatibilty 256 $(this).fadeIn(self.options.speed || self.options.fade, function () { 257 oldImage.remove(); 258 259 // Resume the slideshow 260 if (!self.paused) { 261 self.cycle(); 262 } 263 264 // Trigger the "after" and "show" events 265 // "show" is being deprecated 266 $(['after', 'show']).each(function () { 267 self.$container.trigger($.Event('backstretch.' + this, evtOptions), [self, newIndex]); 268 }); 269 }); 270 271 // Resize 272 self.resize(); 273 }) 274 .appendTo(self.$wrap); 275 276 // Hack for IE img onload event 277 self.$img.attr('src', self.images[newIndex]); 278 return self; 279 } 280 281 , next: function () { 282 // Next slide 283 return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0); 284 } 285 286 , prev: function () { 287 // Previous slide 288 return this.show(this.index === 0 ? this.images.length - 1 : this.index - 1); 289 } 290 291 , pause: function () { 292 // Pause the slideshow 293 this.paused = true; 294 return this; 295 } 296 297 , resume: function () { 298 // Resume the slideshow 299 this.paused = false; 300 this.next(); 301 return this; 302 } 303 304 , cycle: function () { 305 // Start/resume the slideshow 306 if(this.images.length > 1) { 307 // Clear the interval, just in case 308 clearInterval(this.interval); 309 310 this.interval = setInterval($.proxy(function () { 311 // Check for paused slideshow 312 if (!this.paused) { 313 this.next(); 314 } 315 }, this), this.options.duration); 316 } 317 return this; 318 } 319
vendor: 2,464 bytes, lines 320-386
320 , destroy: function (preserveBackground) { 321 // Stop the resize events 322 $(window).off('resize.backstretch orientationchange.backstretch'); 323 324 // Clear the interval 325 clearInterval(this.interval); 326 327 // Remove Backstretch 328 if(!preserveBackground) { 329 this.$wrap.remove(); 330 } 331 this.$container.removeData('backstretch'); 332 } 333 }; 334 335 /* SUPPORTS FIXED POSITION? 336 * 337 * Based on code from jQuery Mobile 1.1.0 338 * http://jquerymobile.com/ 339 * 340 * In a nutshell, we need to figure out if fixed positioning is supported. 341 * Unfortunately, this is very difficult to do on iOS, and usually involves 342 * injecting content, scrolling the page, etc.. It's ugly. 343 * jQuery Mobile uses this workaround. It's not ideal, but works. 344 * 345 * Modified to detect IE6 346 * ========================= */ 347 348 var supportsFixedPosition = (function () { 349 var ua = navigator.userAgent 350 , platform = navigator.platform 351 // Rendering engine is Webkit, and capture major version 352 , wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ) 353 , wkversion = !!wkmatch && wkmatch[ 1 ] 354 , ffmatch = ua.match( /Fennec\/([0-9]+)/ ) 355 , ffversion = !!ffmatch && ffmatch[ 1 ] 356 , operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ) 357 , omversion = !!operammobilematch && operammobilematch[ 1 ] 358 , iematch = ua.match( /MSIE ([0-9]+)/ ) 359 , ieversion = !!iematch && iematch[ 1 ]; 360 361 return !( 362 // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5) 363 ((platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534) || 364 365 // Opera Mini 366 (window.operamini && ({}).toString.call( window.operamini ) === "[object OperaMini]") || 367 (operammobilematch && omversion < 7458) || 368 369 //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2) 370 (ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533) || 371 372 // Firefox Mobile before 6.0 - 373 (ffversion && ffversion < 6) || 374 375 // WebOS less than 3 376 ("palmGetResource" in window && wkversion && wkversion < 534) || 377 378 // MeeGo 379 (ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1) || 380 381 // IE6 382 (ieversion && ieversion <= 6) 383 ); 384 }()); 385 386}(jQuery, window));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.