Javascript - A Simple LightBox

Most websites showcase images using a lightbox, which is used to enlarge smaller thumbnail images. In this article, I explain how to develop a simple lightbox plugin using pure JavaScript.

One of the reasons why you might want to develop your own lightbox is to cut down on the usage of third party libraries. This might be because you want to cut down on the page request or because you want more control on customization.

What is a LightBox

A lightbox is a JavaScript technique to show modal dialogs which can host images and other content. These dialogs usually take center screen and positions themselves above all other content. Usually the background content is made to appear less focused. Modal dialogs help to bring a particular content to the users attention. In this article I will explain how to develop a lightbox that can enlarge a thumbnail image and display it in a modal dialog.

Before we get started with code, lets take a moment to understand the approach. We start with the page load event "window.onload". When this event is triggered, we scan the HTML document and look for all image elements. When an image element is found, we attach an onclick event to the element, which when clicked will display a modal dialog. Using this approach means you don't need to assign an onclick event for each thumbnail image you want to enlarge in a lightbox.

The next step involves dynamically inserting a new element in the "Body" of the document when the thumbnail image is clicked. This element will host the lightbox modal dialog. The appearance of this element will be that it is of fixed size and will consume the entire page. Applying a semi transparent background will give it the appearance of a modal dialog. Clicking anywhere on the modal dialog should close the dialog and remove the newly created element from the document.

It's time we looked at some code, let's start with the window.onload event. As mentioned when the window is loaded, we need to attach an onclick event to every image element. However, there maybe some images on the page such as icons, that don't need to appear in a lightbox. To solve this problem, we can use the role attribute and give it a value. When we scan the document and look for image elements, we only assign an onclick event to those image elements that have a role attribute with a certain value.

1. window.onload = function(){  
2.     var elements = document.getElementsByTagName("img");  
3.     var count = elements.length;  
4.  
5.     for(var i=0; i < count; i++){  
6.  
7.          var role = elements[i].getAttribute("role");  
8.                 
9.          if(role === "lightbox"){  
10.               // Attche event here  
11.          }  
12.     }  
13. }  

The code sample above, gets a collection of all img elements and iterates over the collection, checking each element for a role attribute and if that attribute contains the value "lightbox". When this condition is met, we then assign an anonymous function to the element's onclick event, which when clicked will insert a new element "modal dialog container" to the Body element.

1. elements[i].addEventListener("click", function(){  
2.     var body = document.getElementsByTagName("body")[0];  
3.       
4.     var modal = document.createElement("div");  
5.     modal.style.position = "fixed";   
6.     modal.style.top = "0px";   
7.     modal.style.right = "0px";   
8.     modal.style.bottom = "0px";   
9.     modal.style.left = "0px";   
10.     modal.style.backgroundColor = "rgba(0, 0, 0, 0.6)";  
11.     modal.addEventListener("click", function(){  
12.          this.remove();  
13.     });  
14.       
15.     modal.innerHTML = '<table width="100%" height="100%"><tr><td valign="middle" align="center"><img src="' + this.src + '" class="lightbox_popup" /><td></tr></table>';  
16.  
17.     document.body.insertBefore(modal, document.body.firstChild);  
18. }); 

The code sample above, attaches an anonymous click event to the image element using the addEventListener function. It's important to note that the addEventListener() function does not work on older browsers. For IE version 9 and lower, use the attachEvent function. Once the event has been attached, a new element is created and inserted into the body. This element will host the lightbox modal dialog. Notice how the host element also attaches an onclick event on line 11, this is so that the host and the lightbox can be closed and the host element can be removed from the document. The inner HTML of the modal is the lightbox. You can modify this code to change it's appearance. I've used an HTML Table to align the lightbox in the center of the screen for simplicity. You can download the entire code and a demo from the link below.
Download