Medium.com Like Image Zoom Library – Lightense.js

Category: Javascript , Modal & Popup , Zoom | December 10, 2018
Author: sparanoid
Views Total: 3,973
Official Page: Go to website
Last Update: December 10, 2018
License: MIT

Preview:

Medium.com Like Image Zoom Library – Lightense.js

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.

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:

12/10/2018

  • v1.0.6

12/02/2018

  • Update

08/15/2018

  • Rewritten in ES6

You Might Be Interested In:

Leave a Reply