Magnifying Glass Effect In Vue – Photo Zoom Pro

An image zoom component that applies a magnifying glass effect on images.

How to use it:

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. Available component props.

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: ''
}

Preview:

Changelog:

v3.0.1 (03/13/2023)

• fix: vue v-on bind $listeners warn

v3.0.0 (01/15/2023)

• refactor

v2.5.0 (02/11/2022)

• fix: scale change pointEvent is undefined

v2.4.3 (02/08/2022)

• refactor: mask width and height
• bugfix

v2.4.2 (01/19/2022)

• fix: add core-js to dependencies

v2.4.1 (12/31/2021)

• feat: release props

v2.4.0 (12/29/2021)

• refactor: export plugin use namespace
• refactor: replace hideSelector to mouseEnter

v2.3.0 (12/12/2021)

• Added plugins

v2.2.1 (12/09/2021)

• bugfix

v2.2.0 (10/09/2021)

• fix: fix rollup-plugin-vue built code contains const

v2.1.9 (08/30/2021)

• refactor: compute zoomer width

v2.1.8 (08/29/2021)

• update

v2.1.7 (08/28/2021)

• refactor: compute zoomer width

v2.1.6 (08/26/2021)

• fix: root dom height

v2.1.1 (08/24/2021)

• Update

Download Details:

Author: mater1996

Live Demo: https://mater1996.github.io/vue-photo-zoom-pro/example/

Download Link: https://github.com/mater1996/vue-photo-zoom-pro/archive/refs/heads/master.zip

Official Website: https://github.com/mater1996/vue-photo-zoom-pro

Install & Download:

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