Dead Simple Image Zoom In JavaScript – lumos

Category: Javascript , Modal & Popup , Zoom | July 24, 2019
Views Total:1,178 views
Official Page:Go to website
Last Update:July 24, 2019


Dead Simple Image Zoom In JavaScript – lumos


lumos is an ultra-light (1kb minified), dead simple and high-performance image zoom library written in pure JavaScript.

The library lets you display the larger version of your image with a background overlay and fadeIn & fadeOut animations, just like the image lightbox.

It also has the ability to auto resize the image on window resize, while keeping the images always be centered as you scroll down the page.

See also:

How to use it:

Link to the lumos’ JavaScript and Stylesheet.

<link href="dist/css/lumos.css" rel="stylesheet">
<script src="dist/js/lumos.js"></script>

Add an img tag with the data-action="lumos" attribute to the webpage, and specify the paths to the large/small images using the src and data-src attributes.

<img data-action="lumos" 
     alt="Example Image">

Customize the default styles of the background overlay by overring the default CSS as displayed below:

div#lumos-container {
  transition: all 250ms ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: scale(0);
  opacity: 0;
  cursor: zoom-out


v1.1.1 (07/24/2019)

  • Enabled scrolling when lumos is visible

You Might Be Interested In:

Leave a Reply