macloo/lightbox.html

## lightbox.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Simple Lightbox</title>

	<style>
	/* overlay dims screen for simple lightbox */
	#overlay {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #000; /* black, no image */
	}
	#lightbox {
		position: absolute;
		background: #fff;
		top: 20px;
		left: 20px;
	}
    /* make the image responsive */
	.image {
		max-width: 100%;
		padding: 20px;
	}
	#clickme {
		font-weight: bold;
		color: #F00;
	}
	/* assuming a photo with a width of 800px */
	@media screen and (max-width: 840px) {
		#lightbox {
			top: 0;
			left: 0;
			background: transparent;
		}
		.image { padding: 0; }
	}
	</style>
</head>
<body>


<h1>Lightbox example</h1>

<p>Sometimes you just want a photo to pop up. This is a simple way to get it done.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et velit ut sapien ornare imperdiet. Nulla eget interdum ipsum. Nulla euismod lacinia nibh, tempor volutpat arcu congue vitae.</p>

<p><span id="clickme">CLICK ME!</span> Quisque in pulvinar dolor, suscipit rutrum orci. Maecenas ornare tincidunt leo, in commodo orci ultrices id. Aenean a vehicula tellus. Etiam eget metus ac elit euismod ullamcorper id at orci. Vivamus et cursus elit, non pretium felis. Integer vitae urna pretium, vestibulum ante sed, porta mi. Ut ac massa malesuada, porta ligula at, tristique massa. Cras eu fermentum ligula.</p>


<!-- all JavaScript is below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// this first function will be called by the click function below
function positionLightbox() {
	var top  = ($(window).height() - $('#lightbox').height()) / 2;
	var left = ($(window).width()  - $('#lightbox').width()) / 2;

	$('#lightbox')
	// using those variables we just filled ...
	.css({
		'top': top + $(document).scrollTop(),
		'left': left
		})
	.fadeIn(); // love this
}

// $('#doors').on('click', '.door', function(e) {

$('body').on('click', '#clickme', function(e) {

	$('body').css('overflow', 'hidden');

	$('<div id="overlay"></div>')
	.css('top', $(document).scrollTop())
	.css('opacity', '0')
	.animate({'opacity' : '0.5'}, 'slow')
	.appendTo('body');

	$('<div id="lightbox"></div>')
	.hide() // added this so we don't see photo before it's ready
	.appendTo('body');

	$('<img class="image">')
	.attr("src", "http://macloo.com/images/turkeys800px.jpg")
	// call the new function! This centers the photo and fades it in
	.load(function() {  positionLightbox();  })
	.click(function() {
		$('div#lightbox').remove();
		$('div#overlay').remove();
		$('body').css('overflow', 'auto');
		})
	.appendTo('#lightbox');
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Simple Lightbox</title>

	<style>
	/* overlay dims screen for simple lightbox */
	#overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000; /* black, no image */
	}
	#lightbox {
	position: absolute;
	background: #fff;
	top: 20px;
	left: 20px;
	}
	/* make the image responsive */
	.image {
	max-width: 100%;
	padding: 20px;
	}
	#clickme {
	font-weight: bold;
	color: #F00;
	}
	/* assuming a photo with a width of 800px */
	@media screen and (max-width: 840px) {
	#lightbox {
	top: 0;
	left: 0;
	background: transparent;
	}
	.image { padding: 0; }
	}
	</style>
	</head>
	<body>


	<h1>Lightbox example</h1>

	<p>Sometimes you just want a photo to pop up. This is a simple way to get it done.</p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et velit ut sapien ornare imperdiet. Nulla eget interdum ipsum. Nulla euismod lacinia nibh, tempor volutpat arcu congue vitae.</p>

	<p><span id="clickme">CLICK ME!</span> Quisque in pulvinar dolor, suscipit rutrum orci. Maecenas ornare tincidunt leo, in commodo orci ultrices id. Aenean a vehicula tellus. Etiam eget metus ac elit euismod ullamcorper id at orci. Vivamus et cursus elit, non pretium felis. Integer vitae urna pretium, vestibulum ante sed, porta mi. Ut ac massa malesuada, porta ligula at, tristique massa. Cras eu fermentum ligula.</p>


	<!-- all JavaScript is below -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	// this first function will be called by the click function below
	function positionLightbox() {
	var top = ($(window).height() - $('#lightbox').height()) / 2;
	var left = ($(window).width() - $('#lightbox').width()) / 2;

	$('#lightbox')
	// using those variables we just filled ...
	.css({
	'top': top + $(document).scrollTop(),
	'left': left
	})
	.fadeIn(); // love this
	}

	// $('#doors').on('click', '.door', function(e) {

	$('body').on('click', '#clickme', function(e) {

	$('body').css('overflow', 'hidden');

	$('<div id="overlay"></div>')
	.css('top', $(document).scrollTop())
	.css('opacity', '0')
	.animate({'opacity' : '0.5'}, 'slow')
	.appendTo('body');

	$('<div id="lightbox"></div>')
	.hide() // added this so we don't see photo before it's ready
	.appendTo('body');

	$('<img class="image">')
	.attr("src", "http://macloo.com/images/turkeys800px.jpg")
	// call the new function! This centers the photo and fades it in
	.load(function() { positionLightbox(); })
	.click(function() {
	$('div#lightbox').remove();
	$('div#overlay').remove();
	$('body').css('overflow', 'auto');
	})
	.appendTo('#lightbox');
	});
	</script>

	</body>
	</html>