New Features

README.textile

@@ -71,6 +71,24 @@ As of Version 1.2, Anystretch can also determine the image to use, via a data at
 </script>
 </code></pre>
 
+<pre><code><div class="stretchMe" data-stretch="img03.jpg"></div></code></pre>
+
+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 <a href="http://alistapart.com/article/responsive-images-in-practice" target="_blank">Eric Portis outlined in his 2014 article "Responsive Images in Practice"</a>. 
+
+<pre><code><div class="stretchMe" data-stretch-responsive="img02.jpg 1200w,img03.jpg 800w,img01.jpg 0w"></div></code></pre>
+
+*NOTE:* you *must* have <code>0w</code> option as this is the fallback image for all screens sizes.
+
+h4. Non-Background Behaviour 
+
+Want Anystretch behaviour on your material card design?
+
+<pre><code><div class="stretchMe" data-stretch-nonbg="true"></div></code></pre>
+
+Image will scale with screen size and will sit above content. See the <code>demo.html</code> file in the "examples" folder of this repo.
+
 h2. Changelog
 
 h3. Version 1.2

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"
   }
-}
+}

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;}
 		</style>
 
 	</head>
@@ -51,6 +57,14 @@ <h2>Element with loads and loads of content</h2>
 				<p>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.</p>
 				<p>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.</p>
 			</div>
+	    </div>
+
+		<div class="card">
+		    <div class="stretchMe" data-stretch-nonbg="true" data-stretch-responsive="img02.jpg 1200w,img03.jpg 800w,img01.jpg 0w"></div>
+		    <h2>Image non-background and reponsive sizes</h2>
+		    <p>Resize the screen to see an example of images switching out depending on the size of screen. This behaviour matches the methodology outlined by <a href="http://alistapart.com/article/responsive-images-in-practice" target="_blank">Eric Portis in his 2014 article "Responsive Images in Practice"</a>. This option allows material like card designs with fully responsive liquid style images.</p>
+	    </div>
+
 	    </div>
 
 		<p>This is an example page by <a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a> showing the benefit of <a href="https://github.com/danmillar/jquery-anystretch">jQuery Anystretch</a>, <a href="http://decode.uk.com/">Decode</a>&#8217;s fork of <a href="http://srobbin.com/blog/jquery-plugins/jquery-backstretch/">jQuery Backstretch by Scott Robbin</a>. For context, please refer to <a href="http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/">this blog post</a>. Photos by <a href="http://www.flickr.com/photos/elliotjaystocks/">EJS</a>. <strong>Can&#8217;t see the benefit? Refer to <a href="problem1.html">the problem with inline images</a> and <a href="problem2.html">the problem with CSS&#8217; <em>background-size</em> property</a>.</strong></p>

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,15 +46,16 @@
             if(options && typeof options == "function") callback = options;
 
             // Initialize
-            $(document).ready(_init);
-
+            $(document).ready(_init);      
             // For chaining
             return this;
 
             function _init() {
                 // 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);
+})(jQuery);