simple-image-viewer

A browser module that displays images in a full-screen overlay with zoom/pan support.

Live Demo

Features

• Fullscreen overlay with blur backdrop
• Mouse wheel zoom (centered on cursor)
• Click and drag to pan
• Touch support with pinch-to-zoom
• Keyboard controls (Escape to close, +/- to zoom)
• Zoom controls UI
• Scale indicator
• Responsive design

Installation

JSR (Deno)

import { closeViewer, showImage } from "jsr:@tracker1/simple-image-viewer";

NPM

npm install @tracker1/simple-image-viewer

import { closeViewer, showImage } from "@tracker1/simple-image-viewer";

Browser (ES Module)

<script type="module">
  import { showImage } from "https://esm.sh/@tracker1/simple-image-viewer";

  document.querySelector("img").addEventListener("click", (e) => {
    showImage(e.target.src);
  });
</script>

Usage

import { closeViewer, showImage } from "@tracker1/simple-image-viewer";

// Show an image in the viewer
showImage("https://example.com/image.jpg");

// Programmatically close the viewer
closeViewer();

API

showImage(url: string): void

Opens the image viewer with the specified image URL. If a viewer is already open, it will be closed first.

closeViewer(): void

Closes the currently open image viewer.

Controls

| Input | Action | | ---------------- | -------------- | | Escape | Close viewer | | + / = | Zoom in | | - / _ | Zoom out | | Mouse wheel | Zoom at cursor | | Click + drag | Pan image | | Pinch (touch) | Zoom | | Click outside | Close viewer | | Close button (x) | Close viewer |

License

MIT