vue-magic-zoom
TypeScript icon, indicating that this package has built-in type declarations

1.0.4Β β€’Β PublicΒ β€’Β Published

πŸ”Ž 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 komi@yorgsoft.com

License

Released under the MIT license.

Package Sidebar

Install

npm i vue-magic-zoom

Weekly Downloads

70

Version

1.0.4

License

MIT

Unpacked Size

21.4 kB

Total Files

9

Last publish

Collaborators

  • komig