Dead Simple Image Zoom In JavaScript – lumos

Preview:

Description:

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:

• 10 Best Image Zoom JavaScript and CSS Libraries

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" 
     src="thumb.jpg" 
     data-lumos-src="regular.jpg"
     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
}

Changelog:

v1.1.1 (07/24/2019)

• Enabled scrolling when lumos is visible