<

A Stupidly Simple and Tiny Lightbox Script

Published on
10,146 Points
2,646 Views
5 Endorsements
Last Modified:
Approved
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>

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">

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">

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();
	});
});

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;
}

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()
});

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;
}

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()
	});
});

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;
}

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
5
Comment
Author:Gary
2 Comments

Expert Comment

by:Danielx64
Hi there,

Just a question, is it possible to to put a little x in the top right hand corner so that people know how to get out of the lightbox?
0
LVL 58

Author Comment

by:Gary
Change the append statement to the following replacing the X with an X image or whatever you want to use
$('body').append('<div class="document_backdrop"></div><div class="lb_container"><div style="position:absolute;top:-10px;right:-10px" id="closer">X</div><img src=""></div>');

Open in new window

Replace this
$(document).on('click','.lb_container,.document_backdrop',function(){

Open in new window

with
$(document).on('click','#closer',function(){

Open in new window

0

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month