From 847c1eb9b7e1c38b1e669f9b115edba7e482f84e Mon Sep 17 00:00:00 2001 From: David McCabe Date: Thu, 11 Oct 2012 13:38:42 -0700 Subject: [PATCH] Added fallback option. --- README.textile | 8 ++++++++ jquery.anystretch.js | 6 +++++- jquery.anystretch.min.js | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/README.textile b/README.textile index c08a832..8041167 100755 --- a/README.textile +++ b/README.textile @@ -25,6 +25,10 @@ h3. elPosition (only when not used on the body) This is the css position given to the containing element when used on anything except the body. (type=String, default=relative) +h4. fallback + +This is the path of a fallback image to be loaded if the original image is missing or doesn't load. + h2. Setup Include the jQuery library and Anystretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag): @@ -61,6 +65,10 @@ If you require Anystretch to work on one or more elements inside the page, rathe h2. Changelog +h3. Version 1.1.1 + +* Added the fallback option. + h3. Version 1.1 * Changed options from centeredX/centeredY to positionX/positionY to allow for greater control diff --git a/jquery.anystretch.js b/jquery.anystretch.js index 9038c9d..53f55d9 100755 --- a/jquery.anystretch.js +++ b/jquery.anystretch.js @@ -95,7 +95,11 @@ // Attach the settings container.data("settings", settings); - + + img.one('error', function() { + $(this).attr("src", settings.fallback); + }); + img.attr("src", src); // Hack for IE img onload event // Adjust the background size when the window is resized or orientation has changed (iOS) diff --git a/jquery.anystretch.min.js b/jquery.anystretch.min.js index c52a89d..70918d9 100644 --- a/jquery.anystretch.min.js +++ b/jquery.anystretch.min.js @@ -12,4 +12,4 @@ * This is a fork of jQuery Backstretch (v1.2) * Copyright (c) 2011 Scott Robbin (srobbin.com) */ -;(function($){$.fn.anystretch=function(src,options,callback){var isBody=this.selector.length?false:true;return this.each(function(i){var defaultSettings={positionX:'center',positionY:'center',speed:0,elPosition:'relative'},el=$(this),container=isBody?$('.anystretch'):el.children(".anystretch"),settings=container.data("settings")||defaultSettings,existingSettings=container.data('settings'),imgRatio,bgImg,bgWidth,bgHeight,bgOffset,bgCSS;if(options&&typeof options=="object")$.extend(settings,options);if(options&&typeof options=="function")callback=options;$(document).ready(_init);return this;function _init(){if(src){var img;if(!isBody){el.css({position:settings.elPosition,background:"none"})}if(container.length==0){container=$("
").attr("class","anystretch").css({left:0,top:0,position:(isBody?"fixed":"absolute"),overflow:"hidden",zIndex:(isBody?-999999:-999998),margin:0,padding:0,height:"100%",width:"100%"})}else{container.find("img").addClass("deleteable")}img=$("").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(e){var self=$(this),imgWidth,imgHeight;self.css({width:"auto",height:"auto"});imgWidth=this.width||$(e.target).width();imgHeight=this.height||$(e.target).height();imgRatio=imgWidth/imgHeight;_adjustBG(function(){self.fadeIn(settings.speed,function(){container.find('.deleteable').remove();if(typeof callback=="function")callback()})})}).appendTo(container);if(el.children(".anystretch").length==0){if(isBody){$('body').append(container)}else{el.append(container)}}container.data("settings",settings);img.attr("src",src);$(window).resize(_adjustBG)}}function _adjustBG(fn){try{bgCSS={left:0,top:0};bgWidth=_width();bgHeight=bgWidth/imgRatio;if(bgHeight>=_height()){bgOffset=(bgHeight-_height())/2;if(settings.positionY=='center'||settings.centeredY){$.extend(bgCSS,{top:"-"+bgOffset+"px"})}else if(settings.positionY=='bottom'){$.extend(bgCSS,{top:"auto",bottom:"0px"})}}else{bgHeight=_height();bgWidth=bgHeight*imgRatio;bgOffset=(bgWidth-_width())/2;if(settings.positionX=='center'||settings.centeredX){$.extend(bgCSS,{left:"-"+bgOffset+"px"})}else if(settings.positionX=='right'){$.extend(bgCSS,{left:"auto",right:"0px"})}}container.children("img:not(.deleteable)").width(bgWidth).height(bgHeight).filter("img").css(bgCSS)}catch(err){}if(typeof fn=="function")fn()}function _width(){return isBody?el.width():el.innerWidth()}function _height(){return isBody?el.height():el.innerHeight()}})};$.anystretch=function(src,options,callback){var el=("onorientationchange"in window)?$(document):$(window);el.anystretch(src,options,callback)}})(jQuery); \ No newline at end of file +;(function(a){a.fn.anystretch=function(b,c,d){var e=this.selector.length?false:true;return this.each(function(f){function r(){if(b){var c;if(!e){h.css({position:j.elPosition,background:"none"})}if(i.length==0){i=a("
").attr("class","anystretch").css({left:0,top:0,position:e?"fixed":"absolute",overflow:"hidden",zIndex:e?-999999:-999998,margin:0,padding:0,height:"100%",width:"100%"})}else{i.find("img").addClass("deleteable")}c=a("").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var c=a(this),e,f;c.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();f=this.height||a(b.target).height();l=e/f;s(function(){c.fadeIn(j.speed,function(){i.find(".deleteable").remove();if(typeof d=="function")d()})})}).appendTo(i);if(h.children(".anystretch").length==0){if(e){a("body").append(i)}else{h.append(i)}}i.data("settings",j);c.one("error",function(){a(this).attr("src",j.fallback)});c.attr("src",b);a(window).resize(s)}}function s(b){try{q={left:0,top:0};n=t();o=n/l;if(o>=u()){p=(o-u())/2;if(j.positionY=="center"||j.centeredY){a.extend(q,{top:"-"+p+"px"})}else if(j.positionY=="bottom"){a.extend(q,{top:"auto",bottom:"0px"})}}else{o=u();n=o*l;p=(n-t())/2;if(j.positionX=="center"||j.centeredX){a.extend(q,{left:"-"+p+"px"})}else if(j.positionX=="right"){a.extend(q,{left:"auto",right:"0px"})}}i.children("img:not(.deleteable)").width(n).height(o).filter("img").css(q)}catch(c){}if(typeof b=="function")b()}function t(){return e?h.width():h.innerWidth()}function u(){return e?h.height():h.innerHeight()}var g={positionX:"center",positionY:"center",speed:0,elPosition:"relative"},h=a(this),i=e?a(".anystretch"):h.children(".anystretch"),j=i.data("settings")||g,k=i.data("settings"),l,m,n,o,p,q;if(c&&typeof c=="object")a.extend(j,c);if(c&&typeof c=="function")d=c;a(document).ready(r);return this})};a.anystretch=function(b,c,d){var e="onorientationchange"in window?a(document):a(window);e.anystretch(b,c,d)}})(jQuery) \ No newline at end of file