Interchange

A Responsive Image Solution for Foundation 4

Your page can get stuck in bumper-to-bumper traffic on the responsive interstate as huge images, like diesel trucks, clog the freeway. But we've added a carpool lane that makes it easier to snatch the images you need. Interchange allows your page to swiftly load the exact image for whatever device that's being used. Take our Interchange and you'll soon be rocketing down the responsive byways.

What Does it Do?

Interchange uses media queries to load the images that are appropriate for a user's browser, making responsive images a snap. It decreases the load times for mobile users while still serving the bigger content to your visitors with higher screen resolutions.

View Demo →

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:

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)

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

Score an awesome product engineering or design job

via Job Board from ZURB

Quick Start

Head over to the Foundation download page and get started using our new Interchange plugin today.

Download Interchange

Thoughts?

Visit the blog post about Interchange to see what others are saying or let us know what you think.

On Github

Yeti

Check us out on GitHub and stay up to date with the latest code updates as they happen.


Product Design Training from the Experts at ZURB


Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×