Demo 7 :: Lightbox

You most likely have experienced by now some form of an internet picture lightbox. A lot of sites use them and there are plenty of places to go and find a plugin to use one yourself. But sometimes you may feel the need to write and make your own or enhance a pre existing lightbox. JQuery is the tool to make these fancy lightboxes.

image1 image2 image3 image4 image5

View the HTML code

<div id="imageGallery">
    <a href="../lib/img/flowers/blue-to-purple-perennial-flowers-1.jpg" rel="imageGroup" class="lightbox"><img src="../lib/img/flowers/blue-to-purple-perennial-flowers-1_50.jpg" alt="image1" height="50px" width="50px" /></a>
    <a href="../lib/img/flowers/flowers-595.preview.jpg" rel="imageGroup" class="lightbox"><img src="../lib/img/flowers/flowers-595.preview_50.jpg" alt="image2" height="50px" width="50px" /></a>
    <a href="../lib/img/flowers/Flowers-Images.jpg" rel="imageGroup" class="lightbox"><img src="../lib/img/flowers/Flowers-Images_50.jpg" alt="image3" height="50px" width="50px" /></a>
    <a href="../lib/img/flowers/pretty-pink-flowers-lovely-1.jpg" rel="imageGroup" class="lightbox"><img src="../lib/img/flowers/pretty-pink-flowers-lovely-1_50.jpg" alt="image4" height="50px" width="50px" /></a>
    <a href="../lib/img/flowers/rose-634.jpg" rel="imageGroup" class="lightbox"><img src="../lib/img/flowers/rose-634_50.jpg" alt="image5" height="50px" width="50px" /></a>
</div>

View the jQuery code

$(document).ready(function(){
	$('a.lightbox').click(function(e) {
		$('body').css('overflow-y', 'hidden');// this hides any scrollbars
		
		$('<div id="overlay"></div>')//creates a div with an id of overlay
			.css('top', $(document).scrollTop())//positions the div to the top of the page
			.css('opacity', '0')//sets an opacity to 0
			.animate({'opacity': '0.7'}, 'slow')//animates the opacity to slowly fade to 0.7 opacity
			.click(function() {
				removeLightbox();//when the background is clicked, run the removeLightbox function
			})
			.appendTo('body');//appends it to the body of the document
		
		$('<div id="lightbox"></div>')//creates a div with an id of lightbox
			.hide()//hides the div
			.appendTo('body');//appends the div to the body of the document
		
		$('<img />')//creates an image tag
			.attr('src', $(this).attr('href'))//sets a source attribute equal to the href attribute of the link just clicked to the newly created image tag
			.load(function() {//loads the image in
				positionLightboxImage();//goes to the positionLightboxImage function
			})
			.click(function() {
				removeLightbox();//when the image is clicked, run the removeLightbox function
			})
			.appendTo('#lightbox');//append the img tag to the lightbox div
			
			return false;;//do not send the user to the linked page that was clicked
	});
});
	
function positionLightboxImage() {
	var top = ($(window).height() - $('#lightbox').height()) / 2;
		//subtracts the height of the lightbox div from the height of the window and divides it by 2
	var left = ($(window).width() - $('#lightbox').width()) / 2;
		//subtracts the width of the lightbox div from the width of the window and divides it by 2
	$('#lightbox')
		.css({
			'top': top + $(document).scrollTop(),
			'left': left
		})//sets the top and left position of the div with the value of the top and left variables
		.fadeIn();//fades the div in from its hidden state
}

function removeLightbox() {
	$('#overlay, #lightbox')
		.fadeOut('slow', function() {
		$(this).remove();//slowly removes the overlay and lightbox divs
		$('body').css('overflow-y', 'auto');// brings the scrollbars back to the page
		});
}