matt-bailey/gist:2519776

## gistfile1.html
<!doctype html>
<html>
<head>
	<title>Responsive image test</title>
	<meta charset="utf-8"/>
</head>
<body>

	<div id="browser"></div>

	<div id="window"></div>

	<div id="image">
		<noscript>
			<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>
		</noscript>
	</div>

	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
	// image variables

	var image = '<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>';
	var thumb = '<img src="http://www.filmink.com.au/images/news/thumbs/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>';


	// initial image placement

	selectImage(thumb, image);

	// call function to detect resize of window

	detectResize(thumb, image);

	// resize with 100ms timeout

	function detectResize(thumb, image) {
		var resizeTimeout;

		$(window).bind('resize', function() {
			if (resizeTimeout) clearTimeout(resizeTimeout);
			resizeTimeout = setTimeout(function() {
				/* do responsive stuff... */
				updateBrowserVal(),selectImage(thumb, image)
			}, 100);
		});
	}

 	// select image depending on browser width

	function selectImage(small_image, large_image) {
		var browserwidth = $(window).width();
		if(browserwidth < 768) {
			$('#image').html(small_image);
		}
		if(browserwidth > 768) {
			$('#image').html(large_image);
		}
	}


	// browser width value - for reference

	function updateBrowserVal() {
		$('#browser').text('browser width: ' + $(window).width());
	}


	// screen width - for reference

	$('#window').text('window width: ' + screen.width);


	// basic version of function

	/*
	$(window).resize(function(e){
		var resizewidth = $(window).width();
		$('#browser').text('browser width: ' + resizewidth);
			if(resizewidth < 768) {
				$('#image').html('<img src="http://www.filmink.com.au/images/news/thumbs/6e97b274be9689b299d7.jpg">');
			}
			if(resizewidth > 768) {
				$('#image').html('<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg">');
			}

	});
	*/

	</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Responsive image test</title>
	<meta charset="utf-8"/>
	</head>
	<body>

	<div id="browser"></div>

	<div id="window"></div>

	<div id="image">
	<noscript>
	<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>
	</noscript>
	</div>

	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<script>
	// image variables

	var image = '<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>';
	var thumb = '<img src="http://www.filmink.com.au/images/news/thumbs/6e97b274be9689b299d7.jpg" alt="AFI Award Contenders Announced"/>';


	// initial image placement

	selectImage(thumb, image);

	// call function to detect resize of window

	detectResize(thumb, image);

	// resize with 100ms timeout

	function detectResize(thumb, image) {
	var resizeTimeout;

	$(window).bind('resize', function() {
	if (resizeTimeout) clearTimeout(resizeTimeout);
	resizeTimeout = setTimeout(function() {
	/* do responsive stuff... */
	updateBrowserVal(),selectImage(thumb, image)
	}, 100);
	});
	}

	// select image depending on browser width

	function selectImage(small_image, large_image) {
	var browserwidth = $(window).width();
	if(browserwidth < 768) {
	$('#image').html(small_image);
	}
	if(browserwidth > 768) {
	$('#image').html(large_image);
	}
	}




	// browser width value - for reference

	function updateBrowserVal() {
	$('#browser').text('browser width: ' + $(window).width());
	}


	// screen width - for reference

	$('#window').text('window width: ' + screen.width);


	// basic version of function

	/*
	$(window).resize(function(e){
	var resizewidth = $(window).width();
	$('#browser').text('browser width: ' + resizewidth);
	if(resizewidth < 768) {
	$('#image').html('<img src="http://www.filmink.com.au/images/news/thumbs/6e97b274be9689b299d7.jpg">');
	}
	if(resizewidth > 768) {
	$('#image').html('<img src="http://www.filmink.com.au/images/news/6e97b274be9689b299d7.jpg">');
	}

	});
	*/

	</script>

	</body>
	</html>