Viewer.js is a JavaScript image viewer. It allows user to view full image by clicking image.
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/
