joshfitzgerald/lightbox_simple.html

## lightbox_simple.html
<!DOCTYPE html>
<html>
<head>
	<title>Super Simple lightbox Window</title>

	<style>
	body {
		margin:0;
		padding:0;
		background:#efefef;
		text-align:center; /* center div in IE */
		for ie div centering, reset in wrapper  */
	}
	#wrapper {
		width:600px;
		margin:0 auto;
		border-radius:0 0 5px 5px;
		-moz-border-radius:0 0 5px 5px;
		-webkit-border-radius: 0 0 5px 5px;
		background:#fff;
		border:1px solid #ccc;
		padding:25px;
		border-top:none;
		box-shadow:0 0 5px #ccc;
		-moz-box-shadow:0 0 5px #ccc;
		-webkit-box-shadow:0 0 5px #ccc;
		text-align:left;
	}
	#lightbox {
		    /* keeps the lightbox window in the current viewport. position:fixed makes our overlay appear correctly in the current viewport, no matter the user’s position on screen (top or bottom of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won’t appear correctly.  */
		    position:fixed; /* keeps the lightbox window in the current viewport */
			top:0;
			left:0;
		    /* This makes our #lightbox div, which acts as the black overlay, cover the entire viewport no matter the end user’s screen resolution */
		    width:100%;
			height:100%;
			background: rgba(0,0,0,.7);
			text-align:center;
			}
		/* we will add some text in the lightbox overlay stating they can click anywhere to have the lightbox window disappear */
		#lightbox p {
		    text-align:right;
		    color:#fff;
		    margin-right:20px;
		    font-size:12px;
			}
		#lightbox img {
		    box-shadow:0 0 25px #111;
		    -webkit-box-shadow:0 0 25px #111;
		    -moz-box-shadow:0 0 25px #111;
		    /* Adding a max-width will shrink any high-resolution images we might be linking to. This helps to ensure all images fit into the viewport. */
		    max-width:940px;
			}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>


<body>
<div id="wrapper">
	<h1>Super Simple lightbox Window</h1>
	<p>Our super simple lightbox window demo. Here are the image links:
		<ul>
			<li>
				<!-- We used the class lightbox_trigger on every link that has an image we want to show in our lightbox. This becomes useful when we want to target those elements in the script we will write -->
				<a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">Picture 1</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">Picture 2</a>
			</li>
			<li>
				<a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">Picture 3</a>
			</li>
		</ul>
	</p>
</div> <!-- #/wrapper -->
</body>

<script type="text/javascript">

	/*
	LOGIC OF THE LIGHTBOX
		– User clicks link with class lightbox_trigger
			– Prevent the browser from following the link by default
			- See if the lightbox div is already inside the document
				- If it exists:
					- Find and the existing img tag inside the content div.
					- Replace the image’s src value with the href value of whatever link was clicked.
				- If it doesn’t exist:
					- Insert the lightbox markup into the page with the image’s src value set to the href value of whatever link was clicked
		- Allow any click on the lightbox (when displayed) to make it disappear
	 */


	$(document).ready(function() {

	$('.lightbox_trigger').click(function(e) {

		//prevent default action (hyperlink)
		e.preventDefault();

		//Get clicked link href
		var image_href = $(this).attr("href");

		/*
		If the lightbox window HTML already exists in document,
		change the img src to to match the href of whatever link was clicked

		If the lightbox window HTML doesn't exists, create it and insert it.
		(This will only happen the first time around)
		*/

		if ($('#lightbox').length > 0) { // #lightbox exists

			//place href as img src value
			$('#content').html('<img src="' + image_href + '" />');

		}

		else { //#lightbox does not exist - create and insert (runs 1st time only)

			//create HTML markup for lightbox window
			var lightbox =
			'<div id="lightbox" style="display:none">' +
				'<p>Click to close</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + image_href +'" />' +
				'</div>' +
			'</div>';

			//insert lightbox HTML into page
			$('body').append(lightbox);
		}
		//make sure images that are too tall still ft the window
		var maxheightvalue = $("#lightbox").height -60;
		$("#lightbox img").css("max-height", maxheightvalue + "px");
		//show lightbox window
		$('#lightbox').fadeIn(400);

	});

	//Click anywhere on the page to get rid of lightbox window
	$(document).on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
		$('#lightbox').fadeOut(300);
	});

});
</script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Super Simple lightbox Window</title>

	<style>
	body {
	margin:0;
	padding:0;
	background:#efefef;
	text-align:center; /* center div in IE */
	for ie div centering, reset in wrapper */
	}
	#wrapper {
	width:600px;
	margin:0 auto;
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	background:#fff;
	border:1px solid #ccc;
	padding:25px;
	border-top:none;
	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
	text-align:left;
	}
	#lightbox {
	/* keeps the lightbox window in the current viewport. position:fixed makes our overlay appear correctly in the current viewport, no matter the user’s position on screen (top or bottom of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won’t appear correctly. */
	position:fixed; /* keeps the lightbox window in the current viewport */
	top:0;
	left:0;
	/* This makes our #lightbox div, which acts as the black overlay, cover the entire viewport no matter the end user’s screen resolution */
	width:100%;
	height:100%;
	background: rgba(0,0,0,.7);
	text-align:center;
	}
	/* we will add some text in the lightbox overlay stating they can click anywhere to have the lightbox window disappear */
	#lightbox p {
	text-align:right;
	color:#fff;
	margin-right:20px;
	font-size:12px;
	}
	#lightbox img {
	box-shadow:0 0 25px #111;
	-webkit-box-shadow:0 0 25px #111;
	-moz-box-shadow:0 0 25px #111;
	/* Adding a max-width will shrink any high-resolution images we might be linking to. This helps to ensure all images fit into the viewport. */
	max-width:940px;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

	</head>


	<body>
	<div id="wrapper">
	<h1>Super Simple lightbox Window</h1>
	<p>Our super simple lightbox window demo. Here are the image links:
	<ul>
	<li>
	<!-- We used the class lightbox_trigger on every link that has an image we want to show in our lightbox. This becomes useful when we want to target those elements in the script we will write -->
	<a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger">Picture 1</a>
	</li>
	<li>
	<a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger">Picture 2</a>
	</li>
	<li>
	<a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger">Picture 3</a>
	</li>
	</ul>
	</p>
	</div> <!-- #/wrapper -->
	</body>

	<script type="text/javascript">

	/*
	LOGIC OF THE LIGHTBOX
	– User clicks link with class lightbox_trigger
	– Prevent the browser from following the link by default
	- See if the lightbox div is already inside the document
	- If it exists:
	- Find and the existing img tag inside the content div.
	- Replace the image’s src value with the href value of whatever link was clicked.
	- If it doesn’t exist:
	- Insert the lightbox markup into the page with the image’s src value set to the href value of whatever link was clicked
	- Allow any click on the lightbox (when displayed) to make it disappear
	*/


	$(document).ready(function() {

	$('.lightbox_trigger').click(function(e) {

	//prevent default action (hyperlink)
	e.preventDefault();

	//Get clicked link href
	var image_href = $(this).attr("href");

	/*
	If the lightbox window HTML already exists in document,
	change the img src to to match the href of whatever link was clicked

	If the lightbox window HTML doesn't exists, create it and insert it.
	(This will only happen the first time around)
	*/

	if ($('#lightbox').length > 0) { // #lightbox exists

	//place href as img src value
	$('#content').html('<img src="' + image_href + '" />');

	}

	else { //#lightbox does not exist - create and insert (runs 1st time only)

	//create HTML markup for lightbox window
	var lightbox =
	'<div id="lightbox" style="display:none">' +
	'<p>Click to close</p>' +
	'<div id="content">' + //insert clicked link's href into img src
	'<img src="' + image_href +'" />' +
	'</div>' +
	'</div>';

	//insert lightbox HTML into page
	$('body').append(lightbox);
	}
	//make sure images that are too tall still ft the window
	var maxheightvalue = $("#lightbox").height -60;
	$("#lightbox img").css("max-height", maxheightvalue + "px");
	//show lightbox window
	$('#lightbox').fadeIn(400);

	});

	//Click anywhere on the page to get rid of lightbox window
	$(document).on('click', '#lightbox', function() { //must use live, as the lightbox element is inserted into the DOM
	$('#lightbox').fadeOut(300);
	});

	});
	</script>

	</html>