Basic Usage

This guide will walk you through the basic usage of ImagesViewer, including how to create an instance, navigate between images, and use the core features.

Creating an Instance

There are multiple ways to create an ImagesViewer instance:

Single Image

// Single image URL
const viewer = new ImagesViewer('path/to/image.jpg');

Multiple Images

// Multiple images as an array
const viewer = new ImagesViewer(['image1.jpg', 'image2.jpg', 'image3.jpg']);

// Multiple images with options
const viewer = new ImagesViewer({
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
});

With Configuration

const viewer = new ImagesViewer({
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
  closeOnMaskClick: true,
  loop: true,
  buttons: {
    zoomIn: true,
    zoomOut: true,
    download: true
  }
});

Basic Navigation

Next/Previous Images

// Go to next image
viewer.next();

// Go to previous image
viewer.prev();

// Jump to specific image
viewer.loadCurrentImage(2); // Loads the 3rd image (0-indexed)

Keyboard Navigation

ImagesViewer supports keyboard shortcuts for navigation:

Shortcut	Action
←	Previous image
→	Next image
Esc	Close viewer
↑ or +	Zoom in
↓ or -	Zoom out
0	Reset zoom
F	Toggle fullscreen
I	Toggle info panel

Zoom and Rotation

Zooming

// Zoom in by 10%
viewer.zoom(0.1);

// Zoom out by 10%
viewer.zoom(-0.1);

// Reset zoom
viewer.reset();

// Show original size
viewer.showOriginalSize();

Rotation

// Rotate 90 degrees clockwise
viewer.rotate(90);

// Rotate 90 degrees counter-clockwise
viewer.rotate(-90);

Fullscreen Mode

// Toggle fullscreen
viewer.toggleFullscreen();

Downloading Images

// Download current image
viewer.downloadImage();

Closing the Viewer

// Close the viewer
viewer.close();

Event Callbacks

You can listen to various events using callbacks:

const viewer = new ImagesViewer({
  images: ['image1.jpg', 'image2.jpg'],
  onShow: function(container) {
    console.log('Viewer shown:', container);
  },
  onClose: function() {
    console.log('Viewer closed');
  },
  onChange: function(data) { 
    console.log('Image changed:', data);
  }
});

Mouse and Touch Operations

Mouse Operations

• Drag: Hold left mouse button to drag the image
• Zoom: Use mouse wheel to zoom in/out
• Double-click: Toggle zoom state

Touch Operations

• Single-finger drag: Move the image
• Two-finger pinch: Zoom in/out
• Double-tap: Toggle zoom state

Basic Example

Here's a complete example of using ImagesViewer:

<!DOCTYPE html>
<html>
  <head>
    <title>ImagesViewer Example</title>
  </head>
  <body>
    <button onclick="openViewer()">View Images</button>

    <script src="https://cdn.jsdelivr.net/npm/images-viewer-js@latest/dist/index.js"></script>
    <script>
      function openViewer() {
        const viewer = new ImagesViewer({
          images: [
            'https://example.com/image1.jpg',
            'https://example.com/image2.jpg',
            'https://example.com/image3.jpg'
          ],
          closeOnMaskClick: true,
          imageInfo: {
            visible: true
          },
          buttons: {
            zoomIn: true,
            zoomOut: true,
            download: true,
            fullscreen: true
          }
        });
      }
    </script>
  </body>
</html>