Medium.com Like Image Zoom Library

A dependency-free pure JavaScript image zooming library less than 2 KB (gzipped). Inspired by fat/zoom.js and tholman/intense-images.

This library is mainly used by Almace Scaffolding.

Features

• High performance
• One script, no additional dependencies, no bloated styles
• Safari backdrop-filter support
• 2 KB gzipped

Install

$ npm install lightense-images --save

• Or download library and save it to your project
• Or host it on a CDN and reference it via <script></script> tag

The Lightense library is wrapped in Universal Module Syntax (UMD), this means that out of the box, you can include it into your web application via <script></script> tag, import, or require('lightense-images').

Usage

Configuration object:

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

Inline data configurations:

<img src="image.png"
  data-lightense-padding="40"
  data-lightense-cubic-bezier="cubic-bezier(.2, 0, .1, 1)"
  data-lightense-background="rgba(255, 255, 255, .98)"
  data-lightense-z-index="2147483647">

Setup

<img src="photo.jpg">
<script>
  window.addEventListener('load', function () {
    Lightense('img');
  }, false);
</script>

Custom Background Color

<img src="screenshot.png" data-lightense-background="rgba(0, 0, 0, .96)">

Custom Padding

<img src="screenshot.png" data-lightense-padding="0">

Disable Lightense for Specific Elements

<img src="photo.jpg" class="no-lightense">
<script>
  window.addEventListener('load', function () {
    Lightense('img:not(.no-lightense)');
  }, false);
</script>

Custom Event Hooks

<img
  src="https://d349cztnlupsuf.cloudfront.net/girls_dead_monster_logo.png"
  before-show-alert="Showing!"
  after-show-alert="Showed!"
  before-hide-alert="Hiding!"
  after-hide-alert="Hidden!"
/>
<script>
  window.addEventListener("load", function() {
    Lightense("img:not(.no-lightense),.lightense", {
      beforeShow(config) {
        var beforeShowAttr = config.target.getAttribute("before-show-alert");
        beforeShowAttr && alert(beforeShowAttr);
      },
      afterShow(config) {
        var afterShowAttr = config.target.getAttribute("after-show-alert");
        afterShowAttr && alert(afterShowAttr);
      },
      beforeHide(config) {
        var beforeHideMessage = config.target.getAttribute("before-hide-alert");
        beforeHideMessage && alert(beforeHideMessage);
      },
      afterHide(config) {
        var afterHideMessage = config.target.getAttribute("after-hide-alert");
        afterHideMessage && alert(afterHideMessage);
      }
    });
  }, false);
</script>

Download Details:

Author: sparanoid

Live Demo: https://sparanoid.com/work/lightense-images/

GitHub: https://github.com/sparanoid/lightense-images

#javascript #programming