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: {
  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

Preview:

Vue Inner Image Zoom Component

Changelog:

v2.0.0 (12/02/2021)

  • Upgraded from Vue 2 to Vue 3.

v1.1.1 (09/28/2021)

  • fix(*): Fixed bug with zoom preload and fullscreen portal

v1.1.0 (05/13/2021)

  • Add preload zoom image option
  • Added options to hide close button and hint
  • Added width, height, and responsive spacer options
  • Added zoom on hover option
  • Added zoom scale option

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