🔎 Vue Magic Zoom

An easy to use image zoom lens library for Vue.js 3

Installation

npm install --save vue-magic-zoom

or

yarn add vue-magic-zoom

or

pnpm i vue-magic-zoom

Usage

Import the magic zoom componet.

import { MagicZoom } from "vue-magic-zoom"

Use it in a Vue componens

<MagicZoom src="/default-image.jpg" />

This will render the image and when you hover over it, it will show a little lens with a zoomed in version

The MagicZoom component accepts the following props:

| Prop | Type | Default | Description | | ----------- | ---------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | src | String | - | Required. This is the path to the image that you want to have the ability to zoom on. | | zoomScale | Number | 4 | Optional. This Prop is used to determin the magnification scale of the magnifing lens. | | aspectRatio | Number | 16/9 | Otpional. This can be provided as a fraction like: 16/9 | | fit | String | contain | Otpional. Determines aspect ratio of image | | lensSize | Number | 200 | Optional. Size of lens in pixels, lens will be a square | | width | Number\|String | 100% | Optional. Determines width of image | | height | Number\|String | 100% | Optional. Determines height of image | | alt | String | Zoomed Image | Optional. alt of image | | modifier | String | '' | Optional. KeyCode of a KeyboardEvent (ex.:ControlLeft) this will make it so that the lens only appears if the modifier key is pressed |

Support

For any feedback or to report any issues or general implementation support, please reach out to [email protected]

License

Released under the MIT license.