Touch-friendly Image Zoomer For Vue 3

A responsive, touch-friendly image zoomer component that allows you to zoom and pan images.

How to use it:

1. Import and register the image zoomer.

import { createApp } from 'vue';
import App from './App.vue'
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';
const app = createApp(App);
app.use(VueImageZoomer);
app.mount('#app');

// OR
import { VueImageZoomer } from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';
export default {
  name: 'App',
  components: {
    VueImageZoomer
  }
}

2. Add your images to the Image Zoomer.

<v-image-zoom regular="/path/to/regular.jpg">        
</v-image-zoom>

<!-- OR -->
<v-image-zoom 
  regular="/path/to/regular.jpg" 
  zoom="/path/to/zoom.jpg">        
</v-image-zoom>

3. It also supports webp images.

<v-image-zoom 
  regular="/path/to/regular.jpg" 
  regular-webp="/path/to/regular.webp"
  zoom="/path/to/zoom.jpg"
  zoom-webp="/path/to/zoom.webp">        
</v-image-zoom>

4. It also allows you to fetch the correct images based on the screen size.

<v-image-zoom 
  regular="/path/to/regular.jpg" 
  zoom="/path/to/zoom.jpg"
  :breakpoints="[
    {
      width: 1200,
      regular: '/path/to/regular-1200.jpg',
      zoom: '/path/to/-1200.jpg'
    },
    {
      width: 992,
      regular: '/path/to/-992.jpg',
      zoom: '/path/to/-992.jpg'
    }           
  ]">        
</v-image-zoom>

5. All possible options.

regular: String,
regularWebp: String,
zoom: String,
zoomWebp: String,
imgClass: {
  type: String,
  default: ''
},
alt: String,
zoomAmount:  {
  type: Number,
  default: 0
},
clickZoom: Boolean,
hoverMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Hover to zoom'
},
touchMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Tap to zoom'
},
clickMessage: {
  type: String,
  default: '<span class="vh--icon">&#9906;</span> Click to zoom'
},
closePos: {
  type: String,
  default: 'top-left'
},
messagePos: {
  type: String,
  default: 'bottom'
},
showMessage: {
  type: Boolean,
  default: true,
},
showMessageTouch: {
  type: Boolean,
  default: true
},
breakpoints: Array,
touchZoomPos: {
  type: Array,
  default() {
      return [0.5, 0.5]
  }
},
lazyload: Boolean,
rightClick: Boolean

Preview:

Changelog:

v2.2.3 (11/15/2022)

• import nextTick

v2.2.2 (10/11/2022)

• fix mounted reference being null working with nuxt

v2.2.0 (09/28/2022)

• placeholder and events

v2.1.0 (06/10/2022)

• watch for lazyload prop change

v2.0.1 (06/08/2022)

• Updated for Vue 3

v1.3.0 (11/24/2021)

• Added a touch-zoom-pos prop so user can choose starting position of the zoom image on touch devices.

Download Details:

Author: samjonesigd

Live Demo: https://samueljon.es/vue-image-zoomer/

Download Link: https://github.com/samjonesigd/vue-image-zoomer/archive/refs/heads/master.zip

Official Website: https://github.com/samjonesigd/vue-image-zoomer

Install & Download:

# NPM
$ npm i vue-image-zoomer