Include the required assets before using Viewer.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script>

Trigger Viewer on Image Click

Embed images inside a container and launch the viewer when any image is clicked.

<ul id="thumbList">
  <li><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" data-full="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="Cuo Na Lake"></li>
  <li><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.neU_lyZXZpazGKjZXAlGywHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" data-full="https://tse3-mm.cn.bing.net/th/id/OIP-C.neU_lyZXZpazGKjZXAlGywHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Tibetan Plateau"></li>
  <li><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.AypCcGVj_ZzZnUxbwWyZkQHaFR?w=272&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7" data-full="https://tse2-mm.cn.bing.net/th/id/OIP-C.AypCcGVj_ZzZnUxbwWyZkQHaFR?w=272&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="Jokhang Temple"></li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var galleryBox = document.getElementById('thumbList');
  var preview = new Viewer(galleryBox, {
    url: 'data-full',
    fullscreen: false,
    title: false
  });
});
</script>

Images are displayed as thumbnails; clicking any thumbnail opens the interactive viewer showing the high‑resolution version specified in data-full.

Launch Viewer via Custom Button

Create anchor elements that envoke the viewer with a chosen image source.

<a href="#" onclick="openPreview('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')">View Image 1</a>
<a href="#" onclick="openPreview('https://tse3-mm.cn.bing.net/th/id/OIP-C.neU_lyZXZpazGKjZXAlGywHaEK?w=311&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7')">View Image 2</a>
<a href="#" onclick="openPreview('https://tse2-mm.cn.bing.net/th/id/OIP-C.AypCcGVj_ZzZnUxbwWyZkQHaFR?w=272&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7')">View Image 3</a>

<script>
let imgViewer = null;

function openPreview(src) {
  if (imgViewer) {
    imgViewer.destroy();
  }

  const pic = new Image();
  pic.src = src;

  pic.onload = function () {
    imgViewer = new Viewer(pic, {
      toolbar: {
        zoomIn: true,
        zoomOut: true,
        oneToOne: true,
        reset: true,
        prev: true,
        play: true,
        next: true,
        rotateLeft: true,
        rotateRight: true,
        flipHorizontal: true,
        flipVertical: true
      }
    });
    imgViewer.show();
  };
}
</script>

A fresh Image instance is created for each call; once loaded, it becomes the viewer’s target. Existing viewer instances are destroyed to avoid conflicts.

Key Configuration Options

• url: Selector for the attribute containing the full‑resolution image URL.
• fullscreen: Toggles fullscreen mode on open.
• title: Shows or hides the image title overlay.
• toolbar: Fine‑grained control of visible controls such as zoom, rotate, flip, navigation, and slideshow.
• destroy(): Method to clean up an existing viewer instance before initializing another.

The lifecycle typically involves constructing the viewer object with desired options, loading the image element(s), and invoking show() to present the interface. Event handling and UI interaction are managed internally by the library.