erikvorhes/responsive-images.html

## responsive-images.html
<!-- NOTE: This doesn't work reliably. DO NOT USE. Thx. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Responsive Images</title>
    <!-- A variation on http://www.monoliitti.com/images/ -->
    <!-- Note: the `big` version of the image will be broken, as it doesn’t exist. -->
</head>
<body>
    <h1>A responsive image?</h1>
    <noscript class="img">
        <img src="http://erikanderica.org/i/people/erica.jpg" alt="My awesome wife." />
    </noscript>
    <p>The following should only show when JavaScript is disabled.</p>
    <noscript>
        <img src="http://erikanderica.org/i/people/erik.jpg" alt="My current favorite picture of myself." />
    </noscript>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        (function(c, $) {
            $(function documentReady() {
                var FILENAME_APPENDED_TEXT = "-big.",
                    big = screen.width >= 500;
                $("noscript.img").each(function addImage() {
                    var $noscript = $(this),
                        $img = $($noscript.text()),
                        imgParts,
                        imgExt;

                    if (big) {
                        imgParts = $img[0].src.split(".");
                        imgExt = imgParts.pop();
                        $img.attr({
                            "src": (imgParts.join(".") + FILENAME_APPENDED_TEXT + imgExt)
                        });
                    }

                    $img.insertAfter($noscript);
                });
            });
        }(this, jQuery));
    </script>
</body>
</html>
	<!-- NOTE: This doesn't work reliably. DO NOT USE. Thx. -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Responsive Images</title>
	<!-- A variation on http://www.monoliitti.com/images/ -->
	<!-- Note: the `big` version of the image will be broken, as it doesn’t exist. -->
	</head>
	<body>
	<h1>A responsive image?</h1>
	<noscript class="img">
	<img src="http://erikanderica.org/i/people/erica.jpg" alt="My awesome wife." />
	</noscript>
	<p>The following should only show when JavaScript is disabled.</p>
	<noscript>
	<img src="http://erikanderica.org/i/people/erik.jpg" alt="My current favorite picture of myself." />
	</noscript>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	(function(c, $) {
	$(function documentReady() {
	var FILENAME_APPENDED_TEXT = "-big.",
	big = screen.width >= 500;
	$("noscript.img").each(function addImage() {
	var $noscript = $(this),
	$img = $($noscript.text()),
	imgParts,
	imgExt;

	if (big) {
	imgParts = $img[0].src.split(".");
	imgExt = imgParts.pop();
	$img.attr({
	"src": (imgParts.join(".") + FILENAME_APPENDED_TEXT + imgExt)
	});
	}

	$img.insertAfter($noscript);
	});
	});
	}(this, jQuery));
	</script>
	</body>
	</html>
No results found