Vue Inner Image Zoom Component

Install & Download:

# Yarn
$ yarn add vue-inner-image-zoom
# NPM
$ npm i vue-inner-image-zoom

Description:

An inner zoom Vue.js component that allows the user to click/tap to zoom-in on an image.

The image can also be moved by dragging on touch devices and by either dragging or hover panning on non-touch devices.

The component supports responsive images and optional fullscreen zoom on mobile.

How to use it:

1. Import and register the component.

import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css';
import InnerImageZoom from 'vue-inner-image-zoom';

export default {
  components: {
    'inner-image-zoom': InnerImageZoom
  }
}

2. Add the inner-image-zoom component to the template and define the path to orginal/preview images as follows:

<inner-image-zoom 
  src="/path/to/image.jpg" 
  zoomSrc="/path/to/zoom-image.jpg" />

3. Available component props to config the zoom behavior.

moveType: {
  type: String,
  default: 'pan' // or 'drag'
},
zoomType: {
  type: String,
  default: 'click'
},
src: {
  type: String,
  required: true
},
srcSet: String,
sizes: String,
sources: Array,
width: Number,
height: Number,
hasSpacer: Boolean,
zoomSrc: String,
zoomScale: {
  type: Number,
  default: 1
},
zoomPreload: Boolean,
alt: String,
fadeDuration: {
  type: Number,
  default: 150
},
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
  type: Number,
  default: 640
},
hideHint: Boolean,
hideCloseButton: Boolean,
className: String,
afterZoomIn: Function,
afterZoomOut: Function