A Stupidly Simple and Tiny Lightbox Script

What is a Lightbox?
A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions.

There are lots of Lightbox effects for jQuery.
Problem is they are all (including the smallest one) full of bloated javascript and CSS for what is essentially a very simple task.

This is not a fully fledged lightbox like you will find if you search Google.
It is meant to be a really tiny Lightbox effect you can implement without bloating your page size.

It is only for images and has no navigation (I will expand on this article later if the requirement exists/people want?)

Lets start...

First thing you need to do is make sure you have the jQuery library on your page. So before your closing BODY tag add:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                      

Select all Open in new window

Now we need our thumbnail image.

<img src="http://premium.imagesocket.com/images/2013/07/19/2637029-5czf.jpg" width="70" height="70">
                      

Select all Open in new window

We need to know this image should be targeted by our lightbox so we need to add a class of lightbox

<img src="http://premium.imagesocket.com/images/2013/07/19/2637029-5czf.jpg" width="70" height="70" class="lightbox">
                      

Select all Open in new window

For all your images you just need to continue to add the class="lightbox"

Now for the jQuery magic.

$(document).ready(function(){
                      	$('.lightbox').click(function(e){
                      		// This adds a few DIV's to the body to hold our lightboxed image
                      		$('body').append('<div class="document_backdrop"></div><div class="lb_container"><img src=""></div>');
                              
                      		// This fades our backdrop so we get the nice dark look to the webpage
                      		$('.document_backdrop').animate({'opacity':'.50'}, 300, 'linear');
                              
                      		// This sets the src of our lightboxed image
                      		$(".lb_container img").attr("src",$(this).prop("src"));
                              
                      		// This makes our backdrop and lightboxed image show
                      		$('.document_backdrop, .lb_container').css('display', 'block');
                              
                      		// Due to different layouts this ensures the backdrop fills the whole height of the webpage.
                      		$('.document_backdrop').css('height',$(document).height());
                              
                      		// This centers the image both horizontally and vertically - see the following function.
                      		$('.lb_container').center();
                      	});
                      });
                      

Select all Open in new window

In the function above we made a call to center(), the function below gets the width and height of the visible viewport in the browser and then places the image in the exact centre

jQuery.fn.center = function () {
                      	this.css("position","absolute");
                      	this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +  $(window).scrollTop()) + "px");
                      	this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
                      	return this;
                      }
                      

Select all Open in new window

We also need to be able to let the visitor actually close the window, so we need this little function. No matter where they click the lightbox will be closed.

$(document).on('click','.lb_container,.document_backdrop',function(){
                      	// A little animation to hide the lightbox
                      	$('.document_backdrop, .lb_container').animate({'opacity':'0'}, 300, 'linear', function(){
                      		$('.document_backdrop, .lb_container').css('display', 'none');
                      	});
                      	// Finally remove the lightbox from the page completely.
                      	$('.document_backdrop,.lb_container').remove()
                      });
                      

Select all Open in new window

Finally we just need some CSS to make everything look hunky dory

.document_backdrop{
                      	position:absolute;
                      	top:0px;
                      	left:0px;
                      	width:100%;
                      	background:#000;
                      	opacity: .0;
                      	filter:alpha(opacity=0);
                      	z-index:999998;
                      }
                      .lb_container{
                      	position:absolute;
                      	background:#ffffff;
                      	z-index:999999;
                      	padding:10px;
                      	-webkit-border-radius: 5px;
                      	-moz-border-radius: 5px;
                      	border-radius: 5px;
                      }
                      
                      .lb_container img{
                      	max-width:300px;
                      	max-height:200px;
                      }
                      

Select all Open in new window

The only changes you may need to make to the CSS are the max-width and max-height for the actual lightboxed image - just amend them to your liking.
If your images are all proportionally square then these values should be the same


So to wrap it all up.
Add your jQuery library to the page if not already there.
Add the full js script below

$(document).ready(function(){
                      	$('.lightbox').click(function(e){
                      		// This adds a few DIV's to the body to hold our lightboxed image
                      		$('body').append('<div class="document_backdrop"></div><div class="lb_container"><img src=""></div>');
                              
                      		// This fades our backdrop so we get the nice dark look to the webpage
                      		$('.document_backdrop').animate({'opacity':'.50'}, 300, 'linear');
                              
                      		// This sets the src of our lightboxed image
                      		$(".lb_container img").attr("src",$(this).prop("src"));
                              
                      		// This makes our backdrop and lightboxed image show
                      		$('.document_backdrop, .lb_container').css('display', 'block');
                              
                      		// Due to different layouts this ensures the backdrop fills the whole height of the webpage.
                      		$('.document_backdrop').css('height',$(document).height());
                              
                      		// This centers the image both horizontally and vertically - see the following function.
                      		$('.lb_container').center();
                      	});
                      	jQuery.fn.center = function () {
                      		this.css("position","absolute");
                      		this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +  $(window).scrollTop()) + "px");
                      		this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
                      		return this;
                      	}
                      	$(document).on('click','.lb_container,.document_backdrop',function(){
                      		// A little animation to hide the lightbox
                      		$('.document_backdrop, .lb_container').animate({'opacity':'0'}, 300, 'linear', function(){
                      			$('.document_backdrop, .lb_container').css('display', 'none');
                      		});
                      		// Finally remove the lightbox from the page completely.
                      		$('.document_backdrop,.lb_container').remove()
                      	});
                      });
                      

Select all Open in new window

Add this css

.document_backdrop{
                      	position:absolute;
                      	top:0px;
                      	left:0px;
                      	width:100%;
                      	background:#000;
                      	opacity: .0;
                      	filter:alpha(opacity=0);
                      	z-index:999998;
                      }
                       
                      .lb_container{
                      	position:absolute;
                      	background:#ffffff;
                      	z-index:999999;
                      	padding:10px;
                      	-webkit-border-radius: 5px;
                      	-moz-border-radius: 5px;
                      	border-radius: 5px;
                      }
                      
                      .lb_container img{
                      	max-width:300px;
                      	max-height:200px;
                      }
                      

Select all Open in new window

And finally just add class="lightbox" to the images you want lightboxed!


There you have it - a really tiny lightbox script you can use anywhere just by adding a class of lightbox to your images.
Just 1.6kb in size and less than 1kb when minified.

Click here to see it in action - When the image is displayed, simply click on the image to see the lightbox effect. Or download the full script.

If anyone is interested in seeing it extended to lightbox any element and have navigation then let me know in the comments
lightbox.html