Viewer.js | View Full Image By Clicking with JavaScript

Viewer.js is a JavaScript image viewer. It allows user to view full image by clicking image.

Viewer.js - View Full Image By Clicking with JavaScript

AuthorLinksMade withLast update
fengyuanchenOffice HomeJavaScriptJan 29, 2022

How to use view.js to display image?

Step 1: import view.js and css style

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

Step 2: create a div to contain an image or some images

For example:

<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>

Step 3: create a Viewer instance to view images.

Here is an example code:

// View an image.
const viewer = new Viewer(document.getElementById('image'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});
// Then, show the image by clicking it, or call `viewer.show()`.

// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.

Moreover, you also can find demo in here:

https://fengyuanchen.github.io/viewerjs/