Medium.com Like Image Zoom Library – Lightense.js

Preview:

Description:

Lightense.js is a lightweight and simple to use JavaScript library for image zooming as you seen on Medium.com.

Features:

• Display zoomed image in a lightbox popup.
• Custom background color for the lightbox popup.
• Auto dismisses as you scroll up/down the page.

See Also:

• 10 Best Image Zoom JavaScript & CSS Libraries

How to use it:

Put the Lightense.js JavaScript library at the bottom of the webpage.

<script src="lightense.js"></script>

Initialize the Lightense on the target images.

window.addEventListener('load', function () {
  var el = document.querySelectorAll('img.lightense');
  Lightense(el);
}, false);

Change the default color of the background overlay.

<img src="demo.png" data-background="rgba(0, 0, 0, 0.8)" class="lightense">

You can also specify the image’s path in the ‘data-image’ attribute.

<a class="lightense" data-image="demo.png">Click me</a>

All defauot options.

{
  time: 300, // animation speed
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  background: 'rgba(255, 255, 255, .98)',
  zIndex: 2147483647
};

Changelog:

07/07/2021

• v1.0.17: feat: refine release hooks

07/01/2021

• v1.0.13: fix: window not defined error

07/01/2021

• v1.0.12: fix: self causes error when referring with ssr

06/30/2021

• v1.0.11: fix: container not defined when redeclare function

07/16/2020

• v1.0.9: js: native dark theme support via root-variables

09/02/2019

• v1.0.9

02/20/2019

• v1.0.8

12/10/2018

• v1.0.6: bugfix

12/02/2018

• Update

08/15/2018

• Rewritten in ES6