How to Write to create a Lightbox Effect with Div’s and Javacript

How to Write to create a Lightbox Effect with Div’s and Javacript

The tutorial shows a the light box effect and the use of iframes (changing the src target of the iframe)
A quick and easy snipper of code with minimal hassle

1.The Html Code

<html>
<head>Light Box Effect </head>
<body>
<!–image that onclick triggers the light box effect –>
<img src=”Box.jpg” name=”Box Image” onclick=’LightEffect(“http://www.flickr.com/”)’/>

<!–Div which will show light box effect –>
<div id=’light’ class=’white_content’ style=”>
<a href=’javascript:void(0)’ onclick=’CloseFrame();’>Close</a> <!–Close button –>
<iframe id=’pictureframe’ src=” width=’800′ height=’800′> </iframe></div>”; <!–iframe –>
</div>
<!–div the causes fade shadow ovwe web page –>
<div id=’fade’ class=’black_overlay’>
</div>
</body>
</html>

2.Then the Javascript function that display lightbox effect .

function LightEffect(source)
{
// new url retrieved
var url =source;

// new iframe url set
parent.document.getElementById(“pictureframe”).src=url;

// make lightframe div visible
document.getElementById(“light”).style.display=’block’;

//fadeout web page
document.getElementById(“fade”).style.display=’block’;
}

3.Then the function that closes the lighbox

function CloseFrame()
{
// iframe url removed
parent.document.getElementById(“pictureframe”).src=”;

//make lightframe div not visible
document.getElementById(“light”).style.display=’none’;

//remove fade from web page
document.getElementById(“fade”).style.display=’none’;
}

4. The CSS section (to be out in seperate css document or within the html in the head section )

.black_overlay{

display: none;
position: absolute;

top: 0%;

left: 0%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;
width: 100%;

height: 100%;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;
width: 800px;

height: 800px;

padding: 16px;

}

5.Complete Code

<html>
<head>
<title>Light Box Effect </title >
<style type=”text/css”>

.black_overlay{

display: none;
position: absolute;

top: 0%;

left: 0%;

background-color: black;

z-index:1001;

-moz-opacity: 0.8;
width: 100%;

height: 100%;

opacity:.80;

filter: alpha(opacity=80);

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;
width: 800px;

height: 800px;

padding: 16px;

}

</style>

</head>
<body>
<!–javascript –>
<script type=”text/javascript”>
function LightEffect(source)
{

var url =source;
parent.document.getElementById(“pictureframe”).src=url;
document.getElementById(“light”).style.display=’block’;
document.getElementById(“fade”).style.display=’block’;
}

function CloseFrame()
{
parent.document.getElementById(“pictureframe”).src=”;
document.getElementById(“light”).style.display=’none’;
document.getElementById(“fade”).style.display=’none’;
}
</script>

<!–image that onclick triggers the light box effect –>
<img src=”Box.jpg” name=”Box Image” onclick=’LightEffect(“http://www.flickr.com/”)’/>

<!–Div which will show light box effect –>
<div id=’light’ class=’white_content’ style=”>
<a href=’javascript:void(0)’ onclick=’CloseFrame();’>Close</a> <!–Close button –>
<iframe id=’pictureframe’ src=” width=’800′ height=’800′> </iframe></div>”; <!–iframe –>
</div>
<!–div the causes fade shadow ovwe web page –>
<div id=’fade’ class=’black_overlay’>
</div>
</body>
</html>

Hope this tutorial was helpful

2 Comments
  1. Do you mind if I quote a couple of your articles as long as I provide credit and sources back to
    your blog? My website is in the exact same area of interest as yours and my users
    would certainly benefit from some of the information you provide here.
    Please let me know if this okay with you. Thanks!

Leave a Reply

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