Vue photo zoom pro is a photo zoom component that applies a magnifying glass effect to photos.

vue product zoomer, vue magnifier, vuetify zoom image on hover, vuetify image zoom, vue zoom image on hover, vue pinch zoom, vue image zoom on click

A Simple Generator Plugin for Glassmorphism UI Effect

How to make use of it:

Install and download:

# NPM
$ npm i vue-photo-zoom-pro --save

1. Import and register the component.

import vuePhotoZoomPro from 'vue-photo-zoom-pro'
export default {
  components: {
    vuePhotoZoomPro
  }
}

2. Add the vue-photo-zoom-pro component to the template.

<vue-photo-zoom-pro :high-url="imgSrc">
  <img :src="imgSrc" />
</vue-photo-zoom-pro>

3. Determine the path to the image.

export deafult{
  data(){
    return {
      loaded: false,
      imgSrc: '/path/to/image/'
    }
  },
  created(){
    const img = new Image()
    img.src = imgSrc
    img.addEventListener('load', ()=>{
      this.loaded = true
    })
  }
}

4. Component props available.

highUrl: {
  type: String,
  default: ''
},
width: {
  type: Number,
  default: 168
},
height: {
  type: Number,
  default: -1
},
type: {
  type: String,
  default: 'square',
  validator: function (value) {
    return ['circle', 'square'].indexOf(value) !== -1
  }
},
scale: {
  type: Number,
  default: 2
},
enterEvent: {
  type: [Object, UIEvent],
  default: null
},
moveEvent: {
  type: [Object, UIEvent],
  default: null
},
leaveEvent: {
  type: [Object, UIEvent],
  default: null
},
selector: {
  type: Boolean,
  default: true
},
outZoomer: {
  type: Boolean,
  default: false
},
disabledReactive: {
  type: Boolean,
  default: false
},
disabled: {
  type: Boolean,
  default: false
},
mask: {
  type: Boolean,
  default: false
},
maskColor: {
  type: String,
  default: ''
}

props

Slot

Event

Methods

Magnifying Glass Effect In Vue, vue photo zoom pro Plugin/Github, javascript canvas magnifier

See Demo And Download

Official Website(mater1996): Click Here

This superior jQuery/javascript plugin is developed by mater1996. For extra advanced usage, please go to the official website.