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. position: absolute;
  5. top: 0%;
  6. left: 0%;
  7. width: 100%;
  8. height: 100%;
  9. background-color: black;
  10. z-index: 1001;
  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() {
  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";
  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";
  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.