Small Image Lightbox In Pure JS – Ovrly

Category: Javascript , Modal & Popup | January 31, 2019
Author: dirkeinecke
Views Total: 464 views
Official Page: Go to website
Last Update: January 31, 2019
License: MIT

Preview:

Small Image Lightbox In Pure JS – Ovrly

Description:

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

You Might Be Interested In:


Leave a Reply