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

Posted on by
[Want to get automatic updates on ethel cofie’s blog post of Africa, technology, ecosystems and doing business in Africa sign up here ]

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

[Want to get automatic updates on ethel cofie’s blog post of Africa, technology, ecosystems and doing business in Africa sign up here ]

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