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.
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.