jQuery Fetch Responsive Image plugin

Demo 2: detect breakpoint changes

<img class="my-image" data-media-query="true" />

To keep all size information in one central place (CSS), this parameter calls upon a technique outlined by Brett Jankord to keep track of the current media query in Javascript.

This requires 2 CSS declarations for each media query (to satisfy modern browsers and Opera):

head {font-family:"XS";}
body:after {content:"XS"; display:none;}
.my-image {width: 320px;}

@media (min-width: 480px) {
    head {font-family:"S";}
    body:after{content:"S";}
    .my-image {width: 480px;}
}

etcetera

When option media-query is set to true and the current media query has changed, the width of the element is calculated and passed to the server.

var IMAGE_URL = "img/orion-{width}.jpg";

$.responsive({
    urlSource: function(data) {
        var width = data.width;
        var url = IMAGE_URL.replace("{width}", width);
        return url;
    }
});