Small Image Lightbox In Pure JS – Ovrly

Ovrly is a lightweight, CSS-less JavaScript lightbox library used to display images in a responsive modal popup while preventing body scroll.

How to use it:

Insert the Ovrly library into the HTML document.

<script src="/dist/js/ovrly.js"></script>

Add a link pointing to the original image that will be displayed in the lightbox when clicked.

<a href="https://source.unsplash.com/random/800x600" target="_blank" onclick="return ovrly(this);"><img src="https://source.unsplash.com/random/800x600" alt=""></a>

Override the default styles of the background overlay.

#ovrly {
  background-color:rgba(0,0,0,.8);
  text-align:center;
  box-sizing:border-box;
  padding:50px;
  /* more styles here */
}

Changelog:

01/31/2019

• v1.1.0

01/28/2019

• content of the web page jerks when the image is opened-for-wordpress-file-download

01/25/2019

• close automatically when scrolling