--- name: interchange url: /interchange ---

Interchange

A simple JavaScript solution for responsive images. But not just images, it can even load in HTML partials. Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.



Basic setup

Interchange allows you to specify what specific content to view based on a media query. The last query to match will be shown.

Because of some cool Angular features, you're welcome to either specify the content right away (without including src) or, you can specify a partial to be loaded. Loading is done lazily, meaning that even with 20 different zf-source declarations, only the correct one will load for the current media query. So if you're on mobile, only the mobile partial will load up.

Note that partials do not get RE-LOADED, meaning that as long as the user is on the page, the various partials will be cached.

You can use Interchange with this simple markup:

Resize the page to see the content change.

Advanced HTML

You can use Interchange to display HTML partials depending on screen size like so:

On-page template
Add custom media query rules of your own
Small content
Large content