Touch-enabled Image Viewer In Pure JavaScript – view-bigimg

Preview:

Description:

view-bigimg is a JavaScript library which displays your image in a lightbox popup, with the capability of touch-friendly image zooming and image panning.

How to use it:

Import the view-bigimg’s JavaScript and Stylesheet into the html document.

<link rel="stylesheet" href="/lib/view-bigimg.css">
<script src="/lib/view-bigimg.js"></script>

Initialize the image viewer and we’re ready to go.

var viewer = new ViewBigimg()

Insert the small version of your image into the webpage.

<div id='wrap'>
  <img src="images/demo.jpg" alt="image">
</div>

Enable the image viewer on all the images inside the container ‘wrap’.

var wrap = document.getElementById('wrap')
wrap.onclick = function (e) {
  if (e.target.nodeName === 'IMG') {
    // viewer.show(e.target.src.replace('.jpg', '-big.jpg'))
    viewer.show(e.target.src)
  }
}

Changelog:

07/10/2018

• fix isPassive bug