Create a Simple LightBox in JavaScript

Introduction

 

In this example, we create a LightBox using JavaScript and CSS. So when we click on the image the following LightBox will be shown: 

 

 

Step 1

 

First, we take some images (when we click on the images the LightBox will be shown). We will place this image in a <div> tag like this:

<div id="fade" class="back">
            <img id="img1" src="Koala.jpg" height="150px" width="200px" onclick="document.getElementById('light').style.display='block';Show();document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='0.2';ShowImage1();" />
            <img id="img2" src="Desert.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';
document.getElementById('light').style.display='block';document.getElementById('fade').style.opacity='0.2';ShowImage2();Show();document.getElementById('light').style.display='block';" />
            <img id="img3" src="Lighthouse.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage3();Show();document.getElementById('light').style.display='block';" />
            <img id="img4" src="Penguins.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage4();Show();document.getElementById('light').style.display='block';" />
            <img id="img5" src="Chrysanthemum.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage5();Show();document.getElementById('light').style.display='block';" />
        </div>

Now we will set the CSS of that div:

<style type="text/css">
    .back
    {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        filter: alpha(opacity=80);
    }
</style>

The output will be:

 

 

Step 2

 

Now we will write the code for the LightBox or Overlay Screen, for that we will use another <div> in which we will use a close button and an image:

<div id="light" class="overlay">
    <table>
        <tr>
            <td height="10%" width="10%" align="right">
                <img src="Close.jpg" height="10%" width="5%" onclick="document.getElementById('fade').style.display='block';
.getElementById('fade').style.opacity='1';document.getElementById('light').style.display='none';" />
            </td>
        </tr>
        <tr>
            <td>
                <img id="imgMain" src="Koala.jpg" height="45%" width="100%" />
            </td>
        </tr>
    </table>
</div>

Now we will set the CSS of that Div:

<style type="text/css">
    .overlay
    {
        display: none;
        position: absolute;
        -webkit-border-radius: 20px;
        border: 5px solid red;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
</style>

The output will be:

 

 

Step 3

 

After that we will write the code for the click event of the images so when we click on that the LightBox will be shown:

<img id="img1" src="Koala.jpg" height="150px" width="200px" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='0.2'; Show();ShowImage1();" />

Here we call two JavaScript Functions:

<script language="javascript">
    var x = 10;
    var l = 10;
    var t = 10;
    function ShowImage1() {
        document.getElementById('imgMain').src = "Koala.jpg";
    }
    function Show() {

        document.getElementById('light').style.width = "0px";
        document.getElementById('light').style.height = "0px";
        setTimeout("Show1()", 500);
    }
    function Show1() {
        if ((x < 400) && (l < 500)) {
            if (t < 150) {
                document.getElementById('light').style.top = t + "px";
            }
            else {
                document.getElementById('light').style.top = "120px";

            }
            document.getElementById('light').style.left = l + "px";
            document.getElementById('light').style.width = x + "px";
            document.getElementById('light').style.height = x + "px";

            x = x + 10;
            l = l + 10;
            t = t + 10;
            setTimeout("Show1()", 10);
        }
        else {
            x = 0
            l = 0;
            t = 0;
        }
    }
</script>

In this code we will set the image source of the LighBox image and using the Show Function, the LightBox will be shown in a different style.

 

Step 4

 

Now we will write code for the Close button:

<img src="Close.jpg" height="10%" width="5%" onclick="document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='1';document.getElementById('light').style.display='none';" />

Here we will set the opacity of the fade and light div so the fade <div> will be visible.