Lightense Images

By on

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

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

Setup

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

Custom Background Color

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

Custom Padding

<img src="screenshot.png" data-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>

Download

Browser Support

All modern browsers, it “should work” in Internet Explorer 10 and up as well.

Love this?

Please consider buying me a cup of coffee.