Fullscreen Image Viewer Javascript Library – Intense Images

Category: Javascript , Zoom | June 14, 2018
Authortholman
Last UpdateJune 14, 2018
LicenseMIT
Views2,875 views
Fullscreen Image Viewer Javascript Library – Intense Images

Intense Images is a Javascript image viewer that allows you to display the large version of an image in a fully full screen with mouse interaction.

How to use it:

Include the necessary intense.js in the document.

<script src="intense.js"></script>

Insert an image into your document using IMG tag or DIV element with ‘data-image’ attribute.

<img class="demo" src="img/1.jpg">
<!-- OR -->
<div class="demo" data-image="img/1.jpg">

Add the title and caption about the image using ‘data-title’ and ‘data-caption’ attributes in the IMG or DIV tag.

<div class="demo"
     data-image="1.jpg" 
     data-title="Image Title" 
     data-caption="Image Catpion">
</div>

Active the image viewer with a little Javascript.

window.onload = function() {
var elements = document.querySelectorAll( '.demo' );
Intense( elements );
}

Changelog:

v1.0.7 (06/14/2018)

  • reverse interaction direction with touch

You Might Be Interested In:


Leave a Reply