boostbob

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

boostbob

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

boostbob

<img 
  src="/path/to/default.jpg" 
  data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" 
/>

boostbob

<img 
  src="/path/to/default.jpg" 
  data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]" 
/>

boostbob

<img src="/path/to/default.jpg" 
  data-interchange="[image_path, (screen and only (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2))]" 
/>

boostbob

$(document).foundation('interchange', {   
  named_queries : {   
    my_custom_query : 'only screen and (max-width: 200px)'   
  } 
}); 

boostbob

<script> document.write('<script src=' + ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') + '.js><\/script>') </script>
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/foundation.interchange.js"></script>
<script> $(document).foundation(); </script>

boostbob

<div class="row">
  	<div class="large-12 columns">
			<img src="http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg" 
				data-interchange="[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (default)], 
            					  [http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], 
						  [http://foundation.zurb.com/docs/img/demos/interchange/small.jpg, (small)], 
						  [http://foundation.zurb.com/docs/img/demos/interchange/large.jpg, (large)]">
		</div>
	</div>

boostbob

<img data-interchange="[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (default)], 
  		[http://foundation.zurb.com/docs/img/demos/interchange/smallest.jpg, (screen and (max-width: 568px))], 
			[http://foundation.zurb.com/docs/img/demos/interchange/small.jpg, (small)], 
			[http://foundation.zurb.com/docs/img/demos/interchange/large.jpg, (large)]" 
      src="http://foundation.zurb.com/docs/img/demos/interchange/small.jpg" 
      data-uuid="c78d3e8b-0142-34af-30d3-5afdcb4c42b6"
>

boostbob

uuid : function (separator) {
      var delim = separator || "-";

      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }

      return (S4() + S4() + delim + S4() + delim + S4()
        + delim + S4() + delim + S4() + S4() + S4());
    },