Simple Image Lightbox in Javascript – Ovrly.js

Category: Modal & Popup | February 5, 2019
Author: dirkeinecke
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

To create a simple image lightbox isn’t quite hard and it’s possible to do with Javascript. Today we have Ovrly.js library which is super lightweight CSS-less javascript plugin. It is responsive and allows to modal popup while preventing the body scroll.

The Ovrly.js is a dead a small library which can be used to overlay images on the top of the page. It’s very easy to set up and work well with all modern browsers.

How to Create Photo Image Lightbox in Easy Way.

After downloading the package, You need to add the javascript file in your web page. You can add it before closing head element or in the footer.

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

Next, You need to add an image and then wrap it with a link. And make sure to add onclick function and return the value ovrly(this). This will allow the original photo to display in the lightbox when the user clicks on it.

<a href="img/lightbox.jpg" target="_blank" onclick="return ovrly(this);">
   <img src="img/thumbnail.jpg" alt="">
</a>

If you want to change the background color of an overlay, You can easily do it by editing the style.

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

Changelog:

01/31/2019

  • v1.1.0

01/28/2019

  • The content of the web page jerks when the image is opened-for-WordPress-file-download.

01/25/2019

  • Close automatically when scrolling