Author: | willnguyen1312 |
---|---|
Views Total: | 6 views |
Official Page: | Go to website |
Last Update: | September 30, 2023 |
License: | MIT |
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