π 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
MagicZoom
component accepts the following props:
The 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 komi@yorgsoft.com
License
Released under the MIT license.