Ovrly.js | Displaying Images in a Responsive Modal Popup with JavaScript

Ovrly.js is a lightweight JavaScript lightbox library, it can display images in a responsive modal popup.

How to display images using Ovrly.js?

1.Load ovrly.js in html file

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

2.Add an ovrly() function for a hyperlink

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

It will display image in hyperlink when you have clicked.

3.You can set the style of overly by css

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