nandoflorestan/overlay.html

## overlay.html
<html>
<head>
  <title>jQuery: Click an image to show it big on a viewport-sized modal overlay
  </title>
</head>
<body>
  <p>
    <img class="zoomable" style='width:40%;' src="http://www.tumblr.com/photo/1280/artedaalma/19707693049/1/tumblr_m19h2mwFRQ1rsn8cy" />
  </p>
  <p>
    <img class="zoomable" style='width:40%;' src="http://www.tumblr.com/photo/1280/artedaalma/19707693049/1/tumblr_m19h2mwFRQ1rsn8cy" />
  </p>
<script src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script>
<script>
$('img.zoomable').css({cursor: 'pointer'}).live('click', function () {
  var img = $(this);
  var bigImg = $('<img />').css({
    'max-width': '100%',
    'max-height': '100%',
    'display': 'inline'
  });
  bigImg.attr({
    src: img.attr('src'),
    alt: img.attr('alt'),
    title: img.attr('title')
  });
  var over = $('<div />').text(' ').css({
    'height': '100%',
    'width': '100%',
    'background': 'rgba(0,0,0,.82)',
    'position': 'fixed',
    'top': 0,
    'left': 0,
    'opacity': 0.0,
    'cursor': 'pointer',
    'z-index': 9999,
    'text-align': 'center'
  }).append(bigImg).bind('click', function () {
    $(this).fadeOut(300, function () {
      $(this).remove();
    });
  }).insertAfter(this).animate({
    'opacity': 1
  }, 300);
});
</script>
</body>
</html>
	<html>
	<head>
	<title>jQuery: Click an image to show it big on a viewport-sized modal overlay
	</title>
	</head>
	<body>
	<p>
	<img class="zoomable" style='width:40%;' src="http://www.tumblr.com/photo/1280/artedaalma/19707693049/1/tumblr_m19h2mwFRQ1rsn8cy" />
	</p>
	<p>
	<img class="zoomable" style='width:40%;' src="http://www.tumblr.com/photo/1280/artedaalma/19707693049/1/tumblr_m19h2mwFRQ1rsn8cy" />
	</p>
	<script src="http://static.tumblr.com/xz44nnc/o5lkyivqw/jquery-1.3.2.min.js"></script>
	<script>
	$('img.zoomable').css({cursor: 'pointer'}).live('click', function () {
	var img = $(this);
	var bigImg = $('<img />').css({
	'max-width': '100%',
	'max-height': '100%',
	'display': 'inline'
	});
	bigImg.attr({
	src: img.attr('src'),
	alt: img.attr('alt'),
	title: img.attr('title')
	});
	var over = $('<div />').text(' ').css({
	'height': '100%',
	'width': '100%',
	'background': 'rgba(0,0,0,.82)',
	'position': 'fixed',
	'top': 0,
	'left': 0,
	'opacity': 0.0,
	'cursor': 'pointer',
	'z-index': 9999,
	'text-align': 'center'
	}).append(bigImg).bind('click', function () {
	$(this).fadeOut(300, function () {
	$(this).remove();
	});
	}).insertAfter(this).animate({
	'opacity': 1
	}, 300);
	});
	</script>
	</body>
	</html>