diff --git a/README.textile b/README.textile index faa733a..082a572 100644 --- a/README.textile +++ b/README.textile @@ -71,6 +71,24 @@ As of Version 1.2, Anystretch can also determine the image to use, via a data at +
+ +h4. Responsive Images + +As of version 1.2.5, Anystretch now supports multiple images for reducing data transfer sizes on small screen devices. Behaviour of this matches the suggestions Eric Portis outlined in his 2014 article "Responsive Images in Practice". + +
+ +*NOTE:* you *must* have 0w option as this is the fallback image for all screens sizes. + +h4. Non-Background Behaviour + +Want Anystretch behaviour on your material card design? + +
+ +Image will scale with screen size and will sit above content. See the demo.html file in the "examples" folder of this repo. + h2. Changelog h3. Version 1.2 diff --git a/bower.json b/bower.json index afe6a2b..e60b6b8 100644 --- a/bower.json +++ b/bower.json @@ -13,6 +13,6 @@ }, "repository": { "type": "git", - "url": "git://github.com/danmillar/jquery-anystretch.git" + "url": "git://github.com/caleuanhopkins/jquery-anystretch.git" } -} \ No newline at end of file +} diff --git a/examples/demo.html b/examples/demo.html index ad87131..e2d7ed0 100644 --- a/examples/demo.html +++ b/examples/demo.html @@ -21,6 +21,12 @@ a:hover { background:#fff; } div { background:yellow; border:10px solid #fff; margin:5%; } div div { background:rgba(0,0,0,0.6); border:none; margin:0 0 0 50%; padding:6% 2%; } + .card{background:#000;} + .card div{margin:0;} + .card p{padding:20px;} + .card h2{padding:20px 20px 0 20px;} + .card .nonbg{padding:0;} + .card .stretchMe{max-height:300px; height:100%; padding:0;} @@ -51,6 +57,14 @@

Element with loads and loads of content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + +
+
+

Image non-background and reponsive sizes

+

Resize the screen to see an example of images switching out depending on the size of screen. This behaviour matches the methodology outlined by Eric Portis in his 2014 article "Responsive Images in Practice". This option allows material like card designs with fully responsive liquid style images.

+
+

This is an example page by Elliot Jay Stocks showing the benefit of jQuery Anystretch, Decode’s fork of jQuery Backstretch by Scott Robbin. For context, please refer to this blog post. Photos by EJS. Can’t see the benefit? Refer to the problem with inline images and the problem with CSS’ background-size property.

diff --git a/jquery.anystretch.js b/jquery.anystretch.js index 9055c02..1f6820c 100644 --- a/jquery.anystretch.js +++ b/jquery.anystretch.js @@ -1,12 +1,13 @@ /* * jQuery Anystretch - * Version 1.2 (@jbrooksuk / me.itslimetime.com) - * https://github.com/jbrooksuk/jquery-anystretch + * Version 1.2.5 (@caleuanhopkins / callumhopkins.com) + * https://github.com/caleuanhopkins/jquery-anystretch * Based on Dan Millar's Port * https://github.com/danmillar/jquery-anystretch * * Add a dynamically-resized background image to the body - * of a page or any other block level element within it + * of a page or any other block level element within it. Now + * with responsive image features. * * Copyright (c) 2012 Dan Millar (@danmillar / decode.uk.com) * Dual licensed under the MIT and GPL licenses. @@ -18,21 +19,25 @@ ;(function($) { $.fn.anystretch = function(src, options, callback) { - var isBody = this.selector.length ? false : true; // Decide whether anystretch is being called on an element or not + var isBody = false; //this.length ? false : true; // Decide whether anystretch is being called on an element or not return this.each(function(i){ var defaultSettings = { - positionX: 'center', // Should we center the image on the X axis? - positionY: 'center', // Should we center the image on the Y axis? - speed: 0, // fadeIn speed for background after image loads (e.g. "fast" or 500) - elPosition: 'relative', // position of containing element when not being added to the body - dataName: 'stretch' // The data-* name used to search for + positionX: 'center', // Should we center the image on the X axis? + positionY: 'center', // Should we center the image on the Y axis? + speed: 0, // fadeIn speed for background after image loads (e.g. "fast" or 500) + elPosition: 'relative', // position of containing element when not being added to the body + dataName: 'stretch', // The data-* name used to search for + responsiveDataName: 'stretch-responsive', // The data-* name used for responsive tags + nonbgDataName: 'stretch-nonbg', // The data-* name used for responsive tags + imgAlt: 'stretch-alt', + imgTitle: 'stretch-title' }, el = $(this), container = isBody ? $('.anystretch') : el.children(".anystretch"), settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default existingSettings = container.data('settings'), - imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS; + imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS, imgSrc; // Extend the settings with those the user has provided if(options && typeof options == "object") $.extend(settings, options); @@ -41,8 +46,7 @@ if(options && typeof options == "function") callback = options; // Initialize - $(document).ready(_init); - + $(document).ready(_init); // For chaining return this; @@ -50,6 +54,8 @@ // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo if(src || el.length >= 1) { var img; + + settings.screenSizes = []; if(!isBody) { // If not being added to the body set position to elPosition (default: relative) to keep anystretch contained @@ -98,19 +104,35 @@ // Attach the settings container.data("settings", settings); - - var imgSrc = ""; + if(src) { imgSrc = src; }else if(el.data(settings.dataName)) { imgSrc = el.data(settings.dataName); - }else{ + } + + if(el.data(settings.nonbgDataName)){ + container.parent().css({position: "relative", overflow:"hidden"}) + container.addClass('nonbg').css({zIndex:1, position: "relative"}); + img.css({zIndex:1, position: "relative"}); + } + + if(!imgSrc){ return; } - img.attr("src", imgSrc); // Hack for IE img onload event // Adjust the background size when the window is resized or orientation has changed (iOS) $(window).resize(_adjustBG); + + img.attr("src", imgSrc); // Hack for IE img onload event + console.log(el.data('stretch-alt')); + if(typeof el.data(settings.imgAlt) != 'undefined'){ + img.attr("alt", el.data(settings.imgAlt)); + } + if(typeof el.data(settings.imgTitle)!= 'undefined'){ + img.attr("title", el.data(settings.imgTitle)); + } + } } @@ -119,7 +141,7 @@ bgCSS = {left: 0, top: 0}; bgWidth = _width(); bgHeight = bgWidth / imgRatio; - + // Make adjustments based on image ratio // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter! if(bgHeight >= _height()) { @@ -139,10 +161,12 @@ $.extend(bgCSS, {left: "auto", right: "0px"}); } } - + container.children("img:not(.deleteable)").width( bgWidth ).height( bgHeight ) .filter("img").css(bgCSS); + } catch(err) { + console.log(err); // IE7 seems to trigger _adjustBG before the image is loaded. // This try/catch block is a hack to let it fail gracefully. } @@ -168,4 +192,4 @@ el.anystretch(src, options, callback); }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/jquery.anystretch.min.js b/jquery.anystretch.min.js index f88a6bc..779dee7 100644 --- a/jquery.anystretch.min.js +++ b/jquery.anystretch.min.js @@ -14,4 +14,4 @@ * This is a fork of jQuery Backstretch (v1.2) * Copyright (c) 2011 Scott Robbin (srobbin.com) */ -(function(a){a.fn.anystretch=function(d,c,e){var b=this.selector.length?false:true;return this.each(function(q){var s={positionX:"center",positionY:"center",speed:0,elPosition:"relative",dataName:"stretch"},h=a(this),g=b?a(".anystretch"):h.children(".anystretch"),l=g.data("settings")||s,m=g.data("settings"),j,f,r,p,v,u;if(c&&typeof c=="object"){a.extend(l,c)}if(c&&typeof c=="function"){e=c}a(document).ready(t);return this;function t(){if(d||h.length>=1){var i;if(!b){h.css({position:l.elPosition,background:"none"})}if(g.length==0){g=a("
").attr("class","anystretch").css({left:0,top:0,position:(b?"fixed":"absolute"),overflow:"hidden",zIndex:(b?-999999:-999998),margin:0,padding:0,height:"100%",width:"100%"})}else{g.find("img").addClass("deleteable")}i=a("").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(A){var z=a(this),y,x;z.css({width:"auto",height:"auto"});y=this.width||a(A.target).width();x=this.height||a(A.target).height();j=y/x;o(function(){z.fadeIn(l.speed,function(){g.find(".deleteable").remove();if(typeof e=="function"){e()}})})}).appendTo(g);if(h.children(".anystretch").length==0){if(b){a("body").append(g)}else{h.append(g)}}g.data("settings",l);var w="";if(d){w=d}else{if(h.data(l.dataName)){w=h.data(l.dataName)}else{return}}i.attr("src",w);a(window).resize(o)}}function o(i){try{u={left:0,top:0};r=k();p=r/j;if(p>=n()){v=(p-n())/2;if(l.positionY=="center"||l.centeredY){a.extend(u,{top:"-"+v+"px"})}else{if(l.positionY=="bottom"){a.extend(u,{top:"auto",bottom:"0px"})}}}else{p=n();r=p*j;v=(r-k())/2;if(l.positionX=="center"||l.centeredX){a.extend(u,{left:"-"+v+"px"})}else{if(l.positionX=="right"){a.extend(u,{left:"auto",right:"0px"})}}}g.children("img:not(.deleteable)").width(r).height(p).filter("img").css(u)}catch(w){}if(typeof i=="function"){i()}}function k(){return b?h.width():h.innerWidth()}function n(){return b?h.height():h.innerHeight()}})};a.anystretch=function(d,b,e){var c=("onorientationchange" in window)?a(document):a(window);c.anystretch(d,b,e)}})(jQuery); \ No newline at end of file +!function(t){t.fn.anystretch=function(e,n,i){var o=!1;return this.each(function(a){function s(e){try{p={left:0,top:0},h=d(),(l=h/c)>=r()?(g=(l-r())/2,"center"==v.positionY||v.centeredY?t.extend(p,{top:"-"+g+"px"}):"bottom"==v.positionY&&t.extend(p,{top:"auto",bottom:"0px"})):(l=r(),g=((h=l*c)-d())/2,"center"==v.positionX||v.centeredX?t.extend(p,{left:"-"+g+"px"}):"right"==v.positionX&&t.extend(p,{left:"auto",right:"0px"})),b.children("img:not(.deleteable)").width(h).height(l).filter("img").css(p)}catch(t){console.log(t)}"function"==typeof e&&e()}function d(){return o?m.width():m.innerWidth()}function r(){return o?m.height():m.innerHeight()}var c,h,l,g,p,f,u={positionX:"center",positionY:"center",speed:0,elPosition:"relative",dataName:"stretch",responsiveDataName:"stretch-responsive",nonbgDataName:"stretch-nonbg",imgAlt:"stretch-alt",imgTitle:"stretch-title"},m=t(this),b=o?t(".anystretch"):m.children(".anystretch"),v=b.data("settings")||u;b.data("settings");return n&&"object"==typeof n&&t.extend(v,n),n&&"function"==typeof n&&(i=n),t(document).ready(function(){if(e||m.length>=1){var n;if(v.screenSizes=[],o||m.css({position:v.elPosition,background:"none"}),0==b.length?b=t("
").attr("class","anystretch").css({left:0,top:0,position:o?"fixed":"absolute",overflow:"hidden",zIndex:o?-999999:-999998,margin:0,padding:0,height:"100%",width:"100%"}):b.find("img").addClass("deleteable"),n=t("").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(e){var n,o,a=t(this);a.css({width:"auto",height:"auto"}),n=this.width||t(e.target).width(),o=this.height||t(e.target).height(),c=n/o,s(function(){a.fadeIn(v.speed,function(){b.find(".deleteable").remove(),"function"==typeof i&&i()})})}).appendTo(b),0==m.children(".anystretch").length&&(o?t("body").append(b):m.append(b)),b.data("settings",v),e?f=e:m.data(v.dataName)&&(f=m.data(v.dataName)),m.data(v.nonbgDataName)&&(b.parent().css({position:"relative",overflow:"hidden"}),b.addClass("nonbg").css({zIndex:1,position:"relative"}),n.css({zIndex:1,position:"relative"})),!f)return;t(window).resize(s),n.attr("src",f),console.log(m.data("stretch-alt")),void 0!==m.data(v.imgAlt)&&n.attr("alt",m.data(v.imgAlt)),void 0!==m.data(v.imgTitle)&&n.attr("title",m.data(v.imgTitle))}}),this})},t.anystretch=function(e,n,i){t("onorientationchange"in window?document:window).anystretch(e,n,i)}}(jQuery);