Dead Simple Image Zoom In JavaScript – lumos

Category: Javascript , Modal & Popup , Zoom | July 11, 2018
Author: oliverschwendener
Views Total: 270
Official Page: Go to website
Last Update: July 11, 2018
License: MIT

Preview:

Dead Simple Image Zoom In JavaScript – lumos

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.

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
}

Leave a Reply