Press "Enter" to skip to content

Magnifying Picture Glass Effect In Vue | Photo Zoom Pro

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

Prop NameTypeDefaultNote
high-urlString Clearer picture url
scaleNumber2magnification
disabledBooleanfalsedisabled move
widthNumber166The width of the magnified area
heightNumber-1The height of the magnified area
typeStringsquaremagnifying glass type (circle,square)
selectorBooleantrueshow or remove selector
out-zoomerBooleanfalseamplification region will be displayed on the outside
maskBooleanfalseshow mask
mask-colorColorrgba(0,0,0,0.4)mask color
enter-eventObject/UIEventnullcustom enter event
move-eventObject/UIEventnullcustom move event
leave-eventObject/UIEventnullcustom leave event
disabled-reactiveBooleanfalseDisable listening for internal element info changes

Slot

Slot NameNote
defaultdefault slot
selectorselector slot
zoomerinner zoomer slot
outzoomerout zoomer slot

Event

Event NameNotevalue
createdcreated event 
mouseentermouse enter event 
mousemovemouse move event 
mouseleavemouse leave event 

Methods

Method NameNotevalue
updateupdate

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.