Zoom Image On Hover & Wheel & Pinch – Zoom Image

Preview:

Description:

A mobile-compatible framework-agnostic image zoom component that supports click, mouse wheel scrolling, hover actions, and pinch-to-zoom gestures.

Perfect for e-commerce web developers who want to provide an interactive image viewing experience.

How to use it:

1. Install and import the Zoom Image component.

# Yarn
$ yarn add @zoom-image/core
# NPM
$ npm i @zoom-image/core

import { createZoomImageClick, createZoomImageHover, createZoomImageMove, createZoomImageWheel } from "@zoom-image/core"

2. Add an image to the page.

<div id="example" class="image-viewer">
  <img src="image.webp" />
</div>

.image-viewer {
  width: 400px;
  height: 400px;
  cursor: crosshair;
}
img {
  width: 100%;
  height: 100%;
}

3. Call the function on the top container. That’s it.

const container = document.getElementById("example")
// zoom on click
createZoomImageClick(container);
// zoom on hover
createZoomImageHover(container);
// zoom on move
createZoomImageMove(container);
// zoom on wheel
createZoomImageWheel(container);

4. Available options.

// zoom on click
createZoomImageClick(container,{
  // Zoom scale, default is 4
  zoomFactor?: number
  // The source of zoomed image, default is the same as the original image
  zoomImageSource?: string
});

// zoom on hover
createZoomImageHover(container,{
  // The size of zoomed window where zoomed image will be displayed
  customZoom?: { width: number; height: number }
  // The source of zoomed image
  zoomImageSource?: string
  // The css class will be added to zoom lens element
  zoomLensClass?: string
  // The container of zoomed image
  zoomTarget?: HTMLElement
  // By default, zoomed image will have a scale of 1
  // The smaller the value, the bigger zoomed image and smaller zoom lens
  scaleFactor?: number
});

// zoom on move
createZoomImageMove(container,{
  // Zoom scale, default is 4
  zoomFactor?: number
  // The source of zoomed image, default is the same as the original image
  zoomImageSource?: string
});

// zoom on wheel
createZoomImageWheel(container,{
  // Maximum zoom scale, default is 4
  maxZoom?: number
  // Zoom ratio when scrolling, default is 0.1
  wheelZoomRatio?: number
});

Changelog:

v0.24.0 (09/30/2023)

• Bugfix

v0.21.1 (09/28/2023)

• Bugfix

v0.21.0 (08/06/2023)

• Bugfix

v0.20.0 (07/15/2023)

• Fix state initialization and update internal dependencies

v0.19.0 (07/01/2023)

• Update dependencies

v0.18.1 (06/16/2023)

• Bugfix

v0.18.0 (06/14/2023)

• Enhance zoom wheel

v0.17.0 (06/03/2023)

• Update

v0.16.1 (05/29/2023)

• Clean up remove event listener usage

v0.14.0 (05/21/2023)

• Clean up remove event listener usage

v0.13.0 (05/21/2023)

• Add immutability and cut down bundle size

v0.12.0 (05/18/2023)

• Expose more internal types to client code

v0.11.0 (05/17/2023)

• bugfix

v0.11.0 (05/17/2023)

• Refactor internal store

v0.10.0 (05/16/2023)

• optimize normal store setState

v0.9.0 (05/16/2023)

• fix zoom wheel on update

v0.8.0 (05/16/2023)

• Expose currentZoom property in wheel zoom

v0.7.0 (05/16/2023)

• Add crop image utility

v0.6.0 (05/14/2023)

• Refactor image cache usage

v0.5.0 (05/13/2023)

• Add support for zooming image on click

v0.4.0 (05/12/2023)

• Add image caching mechanism

v0.3.0 (05/12/2023)

• Add zoomed image status
• Migrate background-size to image
• Create simple store for state management

v0.2.1 (05/11/2023)

• Add support for zooming image on move