Touch-friendly Image Zoomer For Vue

Description:

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 Vue from 'vue';
import imageZoom from 'vue-image-zoomer';
new Vue({
    el: '#app',
    components:{
      imageZoom
    }
});

2. Add your images to the Image Zoomer.

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

3. It also supports webp images.

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

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

<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'
    }           
  ]">        
</image-zoom>

Preview:

Touch-friendly Image Zoomer For Vue

Changelog:

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:

You Might Be Interested In:

Add Comment