Lightweight Responsive Image Lightbox In JavaScript – snoLightbox

Preview:

Description:

snoLightbox is a super tiny (~1kb minified) JavaScript library to display images defined in the anchor links in a responsive lightbox popup.

Hit the close button or click the background overlay to close the lightbox.

How to use it:

Insert the main JavaScript and CSS files into the web page.

<link rel="stylesheet" href="src/style.css">
<script src="src/lightbox.js"></script>

Create a normal image link with the CSS class of sno-lightbox and define the path to the image in the href attribute:

<a class="sno-lightbox" href="full.jpg" rel="" >
  <img src="thumb.jpg" alt="">
</a>

Customize the lightbox by overriding the default CSS styles.

#sno_lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background: rgba(0, 0, 0, 0.3);
  visibility: hidden;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}