Codenstuff.com: My Version Of Lightbox

My Version Of Lightbox

3 posts Page 1 of 1

Post Reply

Contributors

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

My Version Of Lightbox
mikethedj4
Thu Mar 25, 2010 7:31 am

Hello class today I'm going to show you how to make my version of the lightbox effect.

Now we'll first startout by giving the background a dim black overlay, as seen in the lightbox effect.

Code: Select all

<html> 
<head> 
<style> 
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
}

Now I'm going to break the code down for you guys .black_overlay identify's the div itself
{ will start out our css code.
display: none; declares for this div to be hidden (you'll see later on why I did that)
position: absolute; this code makes sure that when we use pixels our div will stay put.
top: 0%; left: 0%; these codes identify for our div to remain at 0,0 on our x,y coordinate plane.
width: 100%; height: 100%; these codes make sure that whatever our background color is, that it'll fill our whole background.
background-color: black; this code makes sure our background color is black (NOTE: hex code = #000000).
z-index:1001; now the z-index ins a bit different to explain, so think of a stack of paper, and you move them all but one, which is lets say your layout image (NOTE: the body background/color doesn't apply, but only to divs, and the link to the free layout I made is merely an example of a layout image). You then add another piece of paper above that which is the banner, and another above that which is the about me text, now lets say the layout image was set at 3, and the about me text set at 1. The text wouldn't be visible, as it'd be below the layout image. So I set the z-index 1001 so our semi transparent black background effect wouldn't be below anything, except the lightbox effect to show your images, text, etc: etc:
-moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); these codes enable the background to be 80% in opacity (Definition of opacity), and last but not least } closes out css code for that div.

Now that we've got that said, now lets code our box, so that when we click a link later on the box, and the semi transparent black background will be visible.

Code: Select all

.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 50%; 
height: 70%; 
padding: 16px; 
border: 16px solid orange; 
background-color: white; 
z-index:1002; 
overflow: auto; 
} 
</style> 
</head>

Now what's overflow: auto;? overflow: auto; tells our div that any text, or image that expands past our div, that our div will go into a scrollbar. Now what that whole code does it is makes our box, so that when we click an image, or in our case a link; we'll get this box to popup. So lets go ahead, and finish up our code.

Code: Select all

<body> 
<center><p><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">EXAMPLE</a></p></center>

<div id="light" class="white_content">You're now viewing the lightbox content.<BR><BR><div align="right"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div></div>

<div id="fade" class="black_overlay"></div> 

</body> 
</html>

You've now created my version of the lightbox effect.

Whole Code Together:

Code: Select all

<html>
<head>
<style> 
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
} 

.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 50%; 
height: 70%; 
padding: 16px; 
border: 16px solid orange; 
background-color: white; 
z-index:1002; 
overflow: auto; 
}</style>
</head> 

<body><center><p><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">EXAMPLE</a></p></center>

<div id="light" class="white_content">You're now viewing the lightbox content.<BR><BR><div align="right"><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div></div>

<div id="fade" class="black_overlay"></div>
</body>
</html>