Lightweight Responsive Image Lightbox In JavaScript – snoLightbox

Category: Javascript , Modal & Popup | August 22, 2019
Author: MartinGraebe
Views Total: 66
Official Page: Go to website
Last Update: August 22, 2019
License: MIT

Preview:

Lightweight Responsive Image Lightbox In JavaScript – snoLightbox

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;
}

You Might Be Interested In:


Leave a Reply