Interactive Examples
Choose an example to see iv-viewer-ts in action
Full-Screen Mode
Click thumbnails to view images in an immersive full-screen overlay. Perfect for photo galleries and lightboxes.
Container Mode
Embed the viewer in a custom container with navigation controls. Great for image galleries and carousels.
Image Mode
Enhance existing <img> elements with zoom and pan capabilities. Ideal for product images and detailed views.
Key Features
Zero Dependencies
Lightweight and fast with no external dependencies
Touch Gestures
Pinch zoom, double-tap, and swipe support
Mouse Controls
Wheel zoom and click-and-drag panning
Progressive Loading
Show preview while high-res loads
Snap View
Mini-map for navigating zoomed images
Smooth Animations
Butter-smooth 60fps zoom and pan
Event Listeners
React to zoom, load, and error events
TypeScript
Full type safety and IDE support
Quick Start
1. Install
npm install iv-viewer-ts
2. Import
import ImageViewer from 'iv-viewer-ts';
import 'iv-viewer-ts/dist/iv-viewer-ts.css';
3. Use
const viewer = new ImageViewer('#container');
viewer.load('image.jpg', 'high-res.jpg');
Ready to get started?
Check out the documentation on GitHub or install the package from npm