Foundation Interchange

by makzan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<img data-interchange="[http://placehold.it/500x200&text=normal, (default)], [http://placehold.it/1000x400&text=large, (medium)]" />
<noscript><img src="http://placehold.it/500x200&text=normal" /></noscript>
<h1>Interchange Exercise</h1>
<p>What you need to do is display an image <code>http://placehold.it/500x200&text=normal</code>. While the screen is large enough, we change this image to a higher resolution one: <code>http://placehold.it/1000x400&text=large</code></p>

JavaScript

$(function(){
    $(document).foundation();
});