- Notifications
You must be signed in to change notification settings - Fork1
🔍 Vue 3 image zoom component
License
NotificationsYou must be signed in to change notification settings
D-Marc1/vue-magnifier
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This is a Vue 3 adaptation ofreact-magnifier, which is the original version. Someone else made a Svelte version, calledsvelte-magnifier as well.
Vue image zoom component
- Simple and customizable
- Supports touch screens
- Allows different files for large image and magnifying glass (e.g. thumbnail and high-resolution image)
→Demo
Install the package using NPM:
npm install @websitebeaver/vue-magnifier
Add the component to your Vue application:
<script setup lang="ts">importVueMagnifierfrom'@websitebeaver/vue-magnifier'import'@websitebeaver/vue-magnifier/styles.css'</script><template> <VueMagnifiersrc="./path/to/image"width="500" /></template>
| Prop | Type | Default | Description |
|---|---|---|---|
src (required) | String | – | URL/path of the large image |
height | Number/String | 'auto' | Image height (absolute or relative values possible) |
width | Number/String | '100%' | Image width (absolute or relative values possible) |
className | String | '' | Class which will be applied to the image wrapper |
zoomImgSrc | String | – | URL/path of the image inside the magnifying glass (if not specified, the large image will be used) |
zoomFactor | Number | 1.5 | Factor by which the zoom image will be scaled (based on the size of the large image) |
mgWidth | Number | 150 | Width of the magnifying glass in px |
mgHeight | Number | 150 | Height of the magnifying glass in px |
mgBorderWidth | Number | 2 | Border width of the magnifying glass in px |
mgShape | String | 'circle' | Shape of the magnifying glass (possible values:'circle','square') |
mgShowOverflow | Boolean | true | Set this tofalse to cut off the magnifying glass at the image borders. When disablingmgShowOverflow, it's recommended that you also set all offsets to0 |
mgMouseOffsetX | Number | 0 | Horizontal offset of the magnifying glass in px when hovering with a mouse |
mgMouseOffsetY | Number | 0 | Vertical offset of the magnifying glass in px when hovering with a mouse |
mgTouchOffsetX | Number | -50 | Horizontal offset of the magnifying glass in px when dragging on a touch screen |
mgTouchOffsetY | Number | -50 | Vertical offset of the magnifying glass in px when dragging on a touch screen |
mgShow | Boolean | true | Show or hide magnifying glass. Doesn't exist in React or Svelte version. |
mgCornerBgColor | String | #fff | Magnifying glass corner background color. Doesn't exist in React or Svelte version. |
Any other props will be passed down to the<img> element. This way, you can e.g. add analt attribute to the image.
| Event | Type | Value | Description |
|---|---|---|---|
image:load | Event | - | On image load. Doesn't exist in React or Svelte version. |
.vue-magnifier__magnifier {/* Styles for <div> around image and magnifying glass */}.vue-magnifier__magnifying-glass {/* Styles for magnifying glass */}.vue-magnifier__magnifying-glass.vue-magnifier__circle {/* Styles for magnifying glass circle */}.vue-magnifier__magnifying-glass.vue-magnifier__visible {/* Styles for magnifying glass visible */}
About
🔍 Vue 3 image zoom component
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Contributors3
Uh oh!
There was an error while loading.Please reload this page.