Interchange

Why Would I Use This?

Designers typically start designing for desktops first. The result is creating pages that unnecessarily download large files on smaller devices, slowing down the load and forcing visitors to wait. Or designers have to use media queries to show smaller images. In Foundation, to show a small image on mobile, you could do something like this:

<div class="show-for-small">
  <img src="default.jpg">
</div>
<div class="show-for-medium">
  <img src="medium.jpg">
</div>
<div class="show-for-large">
  <img src="large.jpg">
</div>

This code will definitely show the right image, but it still loads all three of the images no matter the screen resolution. Interchange allows you to get around this by specifying your media queries and alternate images with a data-interchange attribute.

<img src="small.jpg" data-interchange="[small.jpg, (default)], [small.jpg, (small)], [medium.jpg, (medium)]">

We've created shortcuts for all visibility classes in Foundation. You can also pass in your own queries:

<img src="small.jpg" data-interchange="[small.jpg, (only screen and (min-width: 1px))], [small.jpg, (only screen and (min-width: 768px))], [medium.jpg, (only screen and (min-width: 1280px))]">

Built-in named queries:

Custom Named Queries

You can create custom named queries during the Foundation initialization, and also override default named queries:

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

Events

Interchange triggers a replace event when a rule evaluates to true and the image has been replaced.

$(document).on('replace', 'img', function (e, new_path, original_path) {
  console.log(e.currentTarget, new_path, original_path);
});

Adding new images after page load

If you add new images after the page has been loaded, you will need to trigger a reflow by running one of the following:

$(document).foundation('interchange', 'reflow');

// OR for all Foundation components
$(document).foundation('reflow');