A Simple Guide to JavaScript Image Zoom Library: Lightense Images – Lightense Images Tutorial

By | July 31, 2019
0 Comment

Lightense Images is a dependency-free pure JavaScript image zooming library less than 2 KB, which can allow us to zoom an image by clicking. In this tutorial, we will introduce you how to use this library.

Lightense Images Tutorials and Examples

Import lightense.min.js

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sparanoid/lightense-images@master/lightense.min.js"></script>

Insert some images in html

<p>This is <strong>Lightense Images</strong> Demo</p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/girls_dead_monster_logo.png"></p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/railgun-logo.png" data-background="rgba(23, 29, 54, .8)"></p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/imouto-logo-large.png" class="no-lightense"></p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/delicious.com-logo.png" data-padding="0"></p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/030buy-hiring-sketch-02-original.png"></p>

<p><img src="https://d349cztnlupsuf.cloudfront.net/almace-scaffolding-text-vertical.svg" data-lightense-background="rgba(255, 1, 180, .2)"></p>

Here is one thing you must notice:

data-background and data-lightense-background represent the backgroud when an image is zoomed. You can set value by rgba or rgb

Add event listener

<script type="text/javascript">
window.addEventListener('load', function () {
  Lightense('img:not(.no-lightense),.lightense');
}, false);
</script>

You should know:

not(.no-lightense): which means image zoom does not work on images with class no-lightense.

However, this library can not set zoom rate.

Demo

Leave a Reply