Vue Inner Image Zoom Component

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: { // pan or drag
  type: String,
  default: 'pan'
},
srcSet: String,
sizes: String,
sources: Array,
alt: String,
fadeDuration: {
  type: Number,
  default: 150
},
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
  type: Number,
  default: 640
},
className: String,
afterZoomIn: Function,
afterZoomOut: Function

Preview:

Vue Inner Image Zoom Component

Download Details:

Author: laurenashpole

Live Demo: https://laurenashpole.github.io/vue-inner-image-zoom/#/

Download Link: https://github.com/laurenashpole/vue-inner-image-zoom/archive/master.zip

Official Website: https://github.com/laurenashpole/vue-inner-image-zoom

Install & Download:

# Yarn
$ yarn add vue-inner-image-zoom

# NPM
$ npm i vue-inner-image-zoom

You Might Be Interested In:

Add Comment