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