Simplest Image Lightbox In JavaScript – hellbox

hellbox is an extremely light JavaScript lightbox plugin to overlay the large version of the image on the top of the web page.

How to use it:

1. Download and load the hellbox library at the end of the document, right before the closing body tag.

<script src="hellbox.js"></script>

2. Add an image link with the CSS class of ‘hellbox’ to the thumbnail. That’s it.

<a href="hello-world.jpg" class="hellbox" target="_blank">
  <img src="hello-world.jpg">
</a>

3. Override the default CSS styles of the overlay.

var curtain.style.cssText = "position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.5) none 50% 50%/contain no-repeat; display: none"