Lightbox is a small JavaScript library that allows us to overlay series of images on top of our web page. Lightbox was developed by Lokesh Dhakar, it uses jQuery and modernizr and is available for free.

The following video overviews this library using the examples we can find in its official website at http://lokeshdhakar.com/projects/lightbox2.

The following video clip overviews a very simple code sample for using the Lightbox JavaScript library.

The code shown in this video clip is available below. Make sure you fix the relative links to the JavaScript and the CSS files.

<!DOCTYPE html>
<html lang="en-us">
	<head>
		<title>Lightbox Jump Start</title>
		<script src="js/modernizr.custom.js"></script>
		<link rel="stylesheet" href="css/lightbox.css" media="screen"/>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/lightbox-2.6.min.js"></script>
	</head>
	<body>
		<div>
			<a href="img/pix1.jpg" data-lightbox="myphotos" title="bow river">
				<img src="img/pix1.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix2.jpg" data-lightbox="myphotos" title="banff">
				<img src="img/pix2.jpg"  width="150" height="150"/>
			</a>
			<a href="img/pix3.jpg" data-lightbox="myphotos" title="spitz">
				<img src="img/pix3.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix4.jpg" data-lightbox="myphotos" title="interlaken">
				<img src="img/pix4.jpg" width="150" height="150"/>
			</a>
			<a href="img/pix5.jpg" data-lightbox="myphotos" title="central park">
				<img src="img/pix5.jpg" width="150" height="150"/>
			</a>				
		</div>
	</body>
</html>

You can find the complete sample with all the other files it uses as well as slides and video clips for learning how to use this library in my new Lightbox Basics free course at http://abelski.lifemichael.com.

Leave a Reply

Your email address will not be published. Required fields are marked *