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: 
 
LightBox1.jpg
 
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:
  1. <div id="fade" class="back">  
  2.             <img id="img1" src="Koala.jpg" height="150px" width="200px" onclick="document.getElementById('light').style.display='block';Show();document.getElementById('fade').style.display='block';  
  3. document.getElementById('fade').style.opacity='0.2';ShowImage1();" />  
  4.             <img id="img2" src="Desert.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';  
  5. document.getElementById('light').style.display='block';document.getElementById('fade').style.opacity='0.2';ShowImage2();Show();document.getElementById('light').style.display='block';" />  
  6.             <img id="img3" src="Lighthouse.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';  
  7. document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage3();Show();document.getElementById('light').style.display='block';" />  
  8.             <img id="img4" src="Penguins.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';  
  9. document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage4();Show();document.getElementById('light').style.display='block';" />  
  10.             <img id="img5" src="Chrysanthemum.jpg" height="150px" width="200px" onclick="document.getElementById('fade').style.display='block';  
  11. document.getElementById('fade').style.opacity='0.2';document.getElementById('light').style.opacity='1';ShowImage5();Show();document.getElementById('light').style.display='block';" />  
  12.         </div> 
Now we will set the CSS of that div:
  1. <style type="text/css">  
  2.     .back  
  3.     {  
  4.         positionabsolute;  
  5.         top: 0%;  
  6.         left: 0%;  
  7.         width100%;  
  8.         height100%;  
  9.         background-colorblack;  
  10.         z-index1001;  
  11.         -moz-opacity: 0.8;  
  12.         filter: alpha(opacity=80);  
  13.     }  
  14. </style> 
The output will be:
 
LightBox2.jpg
 
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:
  1. <div id="light" class="overlay">  
  2.     <table>  
  3.         <tr>  
  4.             <td height="10%" width="10%" align="right">  
  5.                 <img src="Close.jpg" height="10%" width="5%" onclick="document.getElementById('fade').style.display='block';  
  6. .getElementById('fade').style.opacity='1';document.getElementById('light').style.display='none';" />  
  7.             </td>  
  8.         </tr>  
  9.         <tr>  
  10.             <td>  
  11.                 <img id="imgMain" src="Koala.jpg" height="45%" width="100%" />  
  12.             </td>  
  13.         </tr>  
  14.     </table>  
  15. </div> 
Now we will set the CSS of that Div:
  1. <style type="text/css">  
  2.     .overlay  
  3.     {  
  4.         display: none;  
  5.         position: absolute;  
  6.         -webkit-border-radius: 20px;  
  7.         border: 5px solid red;  
  8.         background-color: white;  
  9.         z-index: 1002;  
  10.         overflow: auto;  
  11.     }  
  12. </style> 
The output will be:
 
LightBox3.jpg
 
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:
  1. <img id="img1" src="Koala.jpg" height="150px" width="200px" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block';  
  2. document.getElementById('fade').style.opacity='0.2'; Show();ShowImage1();" /> 
Here we call two JavaScript Functions:
  1. <script language="javascript">  
  2.     var x = 10;  
  3.     var l = 10;  
  4.     var t = 10;  
  5.     function ShowImage1() {  
  6.         document.getElementById('imgMain').src = "Koala.jpg";  
  7.     }  
  8.     function Show() {  
  9.   
  10.         document.getElementById('light').style.width = "0px";  
  11.         document.getElementById('light').style.height = "0px";  
  12.         setTimeout("Show1()", 500);  
  13.     }  
  14.     function Show1() {  
  15.         if ((x < 400) && (l < 500)) {  
  16.             if (t < 150) {  
  17.                 document.getElementById('light').style.top = t + "px";  
  18.             }  
  19.             else {  
  20.                 document.getElementById('light').style.top = "120px";  
  21.   
  22.             }  
  23.             document.getElementById('light').style.left = l + "px";  
  24.             document.getElementById('light').style.width = x + "px";  
  25.             document.getElementById('light').style.height = x + "px";  
  26.   
  27.             x = x + 10;  
  28.             l = l + 10;  
  29.             t = t + 10;  
  30.             setTimeout("Show1()", 10);  
  31.         }  
  32.         else {  
  33.             x = 0  
  34.             l = 0;  
  35.             t = 0;  
  36.         }  
  37.     }  
  38. </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:
  1. <img src="Close.jpg" height="10%" width="5%" onclick="document.getElementById('fade').style.display='block';  
  2. 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.


Similar Articles