Zoom Image

Overview

Zoom Image is a versatile and lightweight headless library designed to enable image zoom functionality on the web. It provides a seamless user experience commonly found in e-commerce sites. With examples available for Preact, React, Svelte, Vanilla JS, and Vue, Zoom Image offers a range of features to enhance image interactions.

Features

• Zoom on wheel (scroll & pinch)
• Zoom on hover
• Zoom on move
• Zoom on click

Installation

To install the Zoom Image library, follow these steps:

1. Change all versions from “latest” to “workspace*” inside the example project.
2. Run pnpm install to install the necessary packages.
3. Choose the command corresponding to the desired project:
   • For Preact: command
   • For React: command
   • For Remix: command
   • For Next: command
   • For Svelte: command
   • For Vanilla JS: command
   • For Vue: command
   • For Solid: command
   • For Qwik: command

Summary

Zoom Image is a valuable framework-agnostic library that facilitates image zooming functionality on websites, particularly beneficial for e-commerce platforms. With support for various libraries and languages, it offers a seamless user experience with features like zoom on wheel, hover, move, and click. Additionally, the library is inspired by relevant projects and is licensed under MIT © Nam Nguyen.