Multiple Resolutions Demo

In order to change the image based on the resolution, we can specify a set of images for each item in the slideshow.
Each item specifies a width and a url, where the width is the minimum width of the screen for this specific image.
If we have an image of with 1920px, and we want it to be used between screen widths of 1280 and 1920, we'll specify a width of 1280.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $.backstretch([
        [
            { "width": 1280, "url": "sample1_1920.jpg" },
            { "width": 960, "url": "sample1_1280.jpg" },
            { "width": 480, "url": "sample1_960.jpg" },
            { "width": 0, "url": "sample1_480.jpg" }
        ],
        [
            { "width": 1280, "url": "sample2_1920.jpg" },
            { "width": 960, "url": "sample2_1280.jpg" },
            { "width": 480, "url": "sample2_960.jpg" },
            { "width": 0, "url": "sample2_480.jpg" }
        ]
    ]);
</script>