Fullscreen Image Viewer Javascript Library – Intense Images

Category: Javascript , Zoom | June 14, 2018
Author: tholman
Views Total: 2,384
Official Page: Go to website
Last Update: June 14, 2018
License: MIT

Preview:

Fullscreen Image Viewer Javascript Library – Intense Images

Description:

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

Leave a Reply