ZURB Menu

Foundation

Interchange

Interchange uses media queries to load the images that are appropriate for a user's browsers, making responsive images a snap.

Using data-interchange

The Foundation Interchange component utilizes the data-interchange attribute for specifying your media queries and their respective images.

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

Each rule passed to data-interchange is comma delimited and encapsulated in square brackets, and each argument within a rule is also comma delimited. The first parameter is the path to your image, and the second parameter is your media query, surrounded by parenthesis.

data-interchange="[image_path, (media query)], [image_path, (media query)]"

The last rule that evaluates to true will be the image that gets loaded. We recommend that you set your image src to the smallest one, as this will always get loaded.

Using Retina Images

You can easily include retina images by using a pixel-density media query for that image. You can even combine multiple parameters in the media query if need be. The retina media query would look something like this, but you can also use dpi or other pixel densities as well:

data-interchange="[image_path, (screen and only (min-width: 640px) and (-webkit-min-device-pixel-ratio: 2))]"

Named Queries

Interchange has a few built-in shortcuts that correlate with our visibility classes.

Name Media Query
default only screen and (min-width: 1px)
small only screen and (min-width: 768px)
medium only screen and (min-width: 1280px)
large only screen and (min-width: 1440px)
landscape only screen and (orientation: landscape)
portrait only screen and (orientation: portrait)
retina (4.2.1) only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)

To use the named queries, just pass the name in where you would normally specify your query.

data-interchange="[image_path, (large)], [image_path, (landscape)]"

Custom Named Queries

Custom queries can be defined during initialization and are an easy way to make your queries more readable. You can also override the default queries in this way:

$(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. This can be useful when you want to change some styles on your page based on which image is loaded.

$(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');

Using the JavaScript

Before you can use Interchange you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. You can refer to the javascript documentation on setting that up.

Just add foundation.interchange.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

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

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>
        

Required Foundation Library: foundation.interchange.js


This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×