Web Development Project: Lightbox

49 Projects
You are not logged in
Web
Development
Project
Project: Lightbox
Creator:	Graphix
Project type:	Games
Created on:	2010-10-13 15:45:07
Last edit:	2010-11-16 18:14:12
Download:	Start download now
Introduction

Many websites have enclosed lightboxes instead of regular alert()'s. You can use them to enlarge images, ask the user to log in or to inform the user.
Interface

A lightbox consists out of two elements:

A background which covers the entire webpage and darkens it

The actual lightbox that is positioned above the darkend background


Programming

Ok, let's start off with the darkend background. It is pretty simple, you only need to create a <div> right after the <body> tag and position it to the left top and have its width and height to be 100% of the window.

Then you need to set the background color to black, and make it see-through by using the opacity (for all Netscape based browsers, e.g. Firefox, Google Chrome, Safari, Opera.....) and the filter property (for Internet Explorer only, which ofcourse is the only one that needs an exception....)

Also note the z-index, which indicates what layer it is. So if you have it set at 1, you won't see it as it is beneath the already existing HTML.

Code Snippet (Syntax highlighted) - Toggle Wrap

.... Header....
<body>
<div style='position:fixed; top:0px; left:0px; background-color:black; opacity:0,5; filter:alpha(opacity=50); width:100%; height:100%; display:inline; z-index:900;'></div>

.... The rest of the page ....


Now we have the background, we only need to position a div in front of it:

Code Snippet (Syntax highlighted) - Toggle Wrap

.... Header....
<body>
<div style='
 position:fixed; 
 top:0px; 
 left:0px; 
 background-color:black; 
 opacity:0.5; 
 filter:alpha(opacity=50); 
 width:100%; 
 height:100%; 
 display:inline; 
 z-index:900;'
 id='FullScreen'></div>

<div style='
 position: fixed;  
 width: 400px;  
 height: 300px;  
 left: 50%;  
 top: 50%; 
 margin-left: -200px;  
 margin-top: -150px;
 background-color:rgb(251,251,251);
 border:1px solid #BBB;
 display:inline;
 z-index:901;' 
 id='Lightbox'>Some text</div>

.... The rest of the page ....


Now this lightbox will stay there forever, and I don't think we want that ;) , so the next thing we are going to do is write a JavaScript function that hides and a function that shows the lightbox:

Code Snippet (Syntax highlighted) - Toggle Wrap
function ShowLightbox() {
 document.getElementById('FullScreen').style.display='inline';
 document.getElementById('Lightbox').style.display='inline';
}

function HideLightbox() {
 document.getElementById('FullScreen').style.display='none';
 document.getElementById('Lightbox').style.display='none';
}


Also, don't forget to add a link in the lightbox where in my example stands 'Some text' that can be used to close the lightbox:

Code Snippet (Syntax highlighted) - Toggle Wrap

<a href="" onclick="HideLightbox(); return false;">Close</a>

This code in action

And that concludes this tutorial on how to make a lightbox! If you want to download the sourcecode, click the link below for the zip:

http://www.webdevproject.com/zips/Lightbox.zip
Comments
Options