<%= @page_title %>

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 respect images.

<%= code_example ' ', :html %>

Each rule passed to data-interchange is comma delimited and incapsulated 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.

<%= code_example ' data-interchange="[image_path, (media query)], [image_path, (media query)]" ', :html %>

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.

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)

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

<%= code_example ' data-interchange="[image_path, (large)], [image_path, (landscape)]" ', :html %>

Custom Named Queries

Custom queries can be defined during initialization. You can also override the default queries in this way:

<%= code_example " $(document).foundation('interchange', { named_queries : { my_custom_query : 'only screen and (max-width: 200px)' } }); ", :js %>

Events

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

<%= code_example " $(document).on('replace', 'img', function (e, new_path, original_path) { console.log(e.currentTarget, new_path, original_path); }); ", :js %>

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:

<%= code_example " $(document).foundation('interchange', 'reflow'); // OR for all Foundation components $(document).foundation('reflow'); ", :js %>

Using the JavaScript

Interchange requires the Foundation Core, foundation.js and the foundation.interchange.js component to function.

Read how to install Foundation JavaScript