Skip to main content
Zoom Image provides practical examples for each zoom mode across multiple frameworks. Each example demonstrates real-world usage patterns and best practices.

​
Available Examples

Wheel Zoom

Scroll or pinch to zoom with programmatic controls

Hover Zoom

Display zoomed view in a separate target element

Move Zoom

Move cursor to pan around a zoomed image

Click Zoom

Click to toggle between zoomed and normal states

​
Example Structure

Each example includes:
  • Complete implementations in multiple frameworks (React, Vue, Svelte, Angular, and vanilla JavaScript)
  • Configuration options with explanations of key settings
  • Common use cases demonstrating practical applications
  • Working code that you can copy and adapt for your projects

​
Framework Support

All examples are available in the following frameworks:
  • Vanilla JavaScript - Core implementation with no framework dependencies
  • React - Including Next.js and Remix examples
  • Vue - Using Vue 3 composition API
  • Svelte - Both Svelte 4 and Svelte 5
  • Angular - Using Angular services
  • Preact - Lightweight React alternative
  • Solid - Fine-grained reactive framework
  • Qwik - Resumable framework

​
Live Demos

The Zoom Image library includes a comprehensive demo application showcasing all zoom modes. Each framework example is a standalone application that demonstrates:
  • Tab-based navigation between zoom modes
  • Interactive controls for adjusting zoom behavior
  • State management patterns
  • Cleanup and lifecycle handling

​
Source Code

All examples are available in the GitHub repository:

View Examples on GitHub

Browse the complete source code for all framework implementations

​
Getting Started

To run the examples locally: 
# Clone the repository
git clone https://github.com/willnguyen1312/zoom-image.git

# Navigate to an example
cd zoom-image/examples/with-react

# Install dependencies
npm install

# Start the development server
npm run dev

​
Key Concepts

Before exploring the examples, familiarize yourself with these core concepts:

Zoom Modes

Learn about the four different zoom interaction patterns

State Management

Understand how zoom state is managed and updated

​
Next Steps

Explore specific zoom mode examples:
  • Start with Wheel Zoom for the most common use case
  • Try Hover Zoom for product gallery implementations
  • Check out Move Zoom for detailed image inspection
  • Use Click Zoom for mobile-friendly interactions

Build docs developers (and LLMs) love

Get started for freeTalk to us