https://github.com/vue3-zoomer/vue3-zoomer
The ultimate zoomable image component
https://github.com/vue3-zoomer/vue3-zoomer
composition-api drag hover image magnifier nuxt vue vue-zoomer vuejs zoom zoom-images zoomer
Last synced: 3 months ago
JSON representation
The ultimate zoomable image component
- Host: GitHub
- URL: https://github.com/vue3-zoomer/vue3-zoomer
- Owner: vue3-zoomer
- License: mit
- Created: 2024-09-14T19:58:15.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-11-17T21:15:13.000Z (11 months ago)
- Last Synced: 2024-11-17T22:19:31.367Z (11 months ago)
- Topics: composition-api, drag, hover, image, magnifier, nuxt, vue, vue-zoomer, vuejs, zoom, zoom-images, zoomer
- Language: Vue
- Homepage: https://vue3-zoomer.github.io/vue3-zoomer/
- Size: 20 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/vue3-zoomer)
[](https://madewithvuejs.com/p/vue3-zoomer/shield-link)
# Vue3 Zoomer
Vue3 Zoomer is a beautiful image viewer component for Vue.js projects, making it easy to create stunning zoomable images for ecommerce, art galleries, infographics, and any other image you need to zoom into.
## Why Use Vue3 Zoomer?
- **Customizable Zoom Behavior**: Choose zoom type, trigger, scale, and step to fit your specific requirements.
- **Touch Device Support**: The component works seamlessly on both desktop and mobile devices, providing a smooth zooming experience across platforms.
- **Multiple Zoom Components**: Vue3 Zoomer offers a variety of zoom components to choose from, allowing you to select the one that best fits your project's needs.
- **Typescript Support**: The component is written in Typescript, ensuring type safety and a better developer experience.
- **Easy Integration**: Vue3 Zoomer is simple to set up and use in your Vue.js and Nuxt.js projects, making it a great choice for quickly adding image zooming capabilities to your application.
## Installation
Install the package using npm, yarn, or bun:
```bash
npm install vue3-zoomer
```
## Basic Usage
First, import the `ZoomImg` component:
```ts
import { ZoomImg } from "vue3-zoomer";
```
Then, use the `ZoomImg` component in your template:
```html
```
### Demo
### Props
| Name | Type | Default | Description |
| -------------- | -------------------- | -------------- | -------------------------------------------------------------------------- |
| `src` | `String` | `required` | The source URL of the image to be zoomed. |
| `alt` | `String` | `"zoomed-img"` | Alternative text description of the image for accessibility. |
| `zoomScale` | `Number` | `2` | The desired zoom scale of the image. |
| `trigger` | `"click" \| "hover"` | `"click"` | The event that triggers the zoom functionality, either "click" or "hover". |
| `zoomType` | `"move" \| "drag"` | `"move"` | The type of zoom interaction, either "move" or "drag". |
| `step` | `Number` | - | The step value for the zoom scale. |
| `persist` | `Boolean` | false | Whether the zoom state should persist on mouse leave. |
| `showZoomBtns` | `Boolean` | false | Show controls to increase or decrease the zoom scale from buttons. |
| `showImgMap` | `Boolean` | false | Whether to display the image map overlay. |
## Magnifier
```html
```
### Demo
### Props
| Name | Type | Default | Description |
| ----------- | -------- | ---------- | ----------------------------------------- |
| `src` | `String` | `required` | The source URL of the image to be zoomed. |
| `zoomScale` | `Number` | `2` | The initial zoom scale of the image. |
| `size` | `Number` | `200` | The initial magnifier size. |
### Events
| Name | Description |
| ------- | --------------------------------------------------- |
| `load` | Triggered when the image has successfully loaded. |
| `error` | Triggered when there is an error loading the image. |
## License
Licensed under the [MIT license](https://github.com/vue3-zoomer/vue3-zoomer/blob/main/LICENSE.md).