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

Setup

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

Custom Background Color

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

Disable Lightense for Specific Elements

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

Download

Love this?

Please consider buying me a cup of coffee.