Make a simple Image Light box in HTML5

Its always beautiful to have a Image Light box for your images on your blog. If the image contain small details, it becomes easy to click on them and view image larger using image light box.

Click on the image below. It opens in light box. Similarly I'm going to make a simple and lightweight js that you can use in your web pages.

The Master-plan

The plan is to write a JavaScript which will detect all the images on the webpage. it will set onclick listener on all the images. Once any image is clicked it will show a overlay <div>...</div> by replacing image src.

Create a Script Tag

We're going to make a simple <script></script> tag with img_find function. This function will be doing work of setting onclick listener to all the images.

After that, on clicking any image, it will open a popup. We can make popup using JS also, but I've embedded it right in the document.

That's it! All this works using simple JavaScript! No plugins required!

And below is the complete code.

Complete Code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>
<!--Post Content -->
<h2>Modal Example</h2>
<img src="your-src" alt="W3Schools.com" width="104" height="142">
<img src="your-src" alt="W3Schools.com" width="104" height="142">
<img src="your-src" alt="W3Schools.com" width="104" height="142">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">�-</span>
    <image style="height:100%;width:100%;" id="ig" src="" alt="Lightroom Image" />
   </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

//Get the image placeholder
var ig = document.getElementById("ig");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

img_find(); //Trigger the function
function img_find(m) {
var imgs=document.querySelectorAll("img");

    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
		imgs[i].setAttribute("onclick","viewLB('" + imgs[i].src + "');");
    }

    return imgSrcs;
}

// When the user clicks the image, open the modal 
function viewLB(n) {
  modal.style.display = "block";
  ig.src = n ;
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

I've implemented the above thing to this page.You can click on the image below to see how it works.

Implementing Light box to Blogger or WordPress

Now how to implement it to blogger or WordPress? First of all disable any light box if its already active.

Then put the JavaScript below at the end of your theme. (if you want this lightbox to work for all the pages).

<script>
var modal = document.getElementById("myModal");
var ig = document.getElementById("ig");
var span = document.getElementsByClassName("close")[0];
img_find();
function img_find(m) {
var imgs=document.querySelectorAll("img");var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
		imgs[i].setAttribute("onclick","viewLB('" + imgs[i].src + "');");
    }return imgSrcs;}
function viewLB(n) {
  modal.style.display = "block";
  ig.src = n ;
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";}}
</script>

Then put the below CSS in the <head> section of your page.

<style > .modal{display:none;position:fixed;z-index:1;padding-top:100px;
left:0;top:0;width:100%;
height:100%;overflow:auto;background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4)}
.modal-content{background-color:#fefefe;margin:auto;
padding:20px;border:1px solid #888;width:80%}
.close{color:#aaaaaa;float:right;font-size:28px;font-weight:bold}.close:focus,
.close:hover{color:#000;text-decoration:none;cursor:pointer}</style>

And just after head, put the HTML code below.

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <image style="height:100%;width:100%;" id="ig" src="" alt="Lightroom Image" />
   </div>
</div>

That's it and you're done!

This was really very light weight image light box. Further you can make it very light by minifying it.

You can add more features to it such as adding carousal, adding zoom in and zoom out button etc. Further, compressing all the HTML, CSS and JavaScript into one JS library will make it easy to add to a document.