Touch-friendly Image Zoom Effect For Vue.js

by Posted on

Are you looking for Vue component for zoom the image or other thing with mouse or touch then in this post I am going to share simple vue Image zoom component which allow you to zoom image on mouse hover or touch. which works perfectly on mobile devices or touch friendly devices.
Touch-friendly-Image-Zoom-Effect-For-Vue.js

Installation:

Install component via npm

npm install vue-zoomer

Import the vue zoomer component.

import Vue from 'vue'
import VueZoomer from 'vue-zoomer'
import 'vue-zoomer/dist/vue-zoomer.css'
 
Vue.use(VueZoomer)

Single usage:
Add image zoomer on single image on touch.

<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
  <img
    src="./assets/landscape-1.jpg"
    style="object-fit: contain; width: 100%; height: 100%;"
  >
</v-zoomer>

Gallery usage:
You can also apply image zoom effect on photo gallery.

<v-zoomer-gallery
  style="width: 100vw; height: 100vh;"
  :list="['a.jpg', 'b.jpg', 'c.jpg']"
  v-model="selIndex"
></v-zoomer-gallery>


API

<v-zoomer> Props

  • maxScale: number – Maximum scale limit, default is 1;
  • minScale: number – Minimum scale limit, default is 5;
  • zoomed: out boolean – Whether zoomed in (scale equals to 1). out means the prop is a child to parent one-way binding. So there must have a .sync modifier.
  • pivot: 'cursor' | 'image-center' – The pivot when zoom the content, default is cursor, can set to be image-center;
  • limitTranslation: boolean – Whether to limit the content into the container, default is true;
  • doubleClickToZoom: boolean – Whether to zoom in/out the content by double click, default is true;

<v-zoomer> Methods

  • reset() – Reset the scale and translate to the initial state.
  • zoomIn(scale=2) – Zoom in.
  • zoomOut(scale=0.5) – Zoom out.

<v-zoomer-gallery> Props

  • list: Array<string> required – Displaying image urls;
  • v-model(value): number required – Index of current showing image;
  • pivot: 'cursor' | 'image-center' – The pivot when zoom the image, default is cursor, can set to be image-center;
  • limitTranslation: boolean – Whether to limit the image into the container, default is true;
  • doubleClickToZoom: boolean – Whether to zoom in/out the image by double click, default is true;

<v-zoomer-gallery> Methods

  • reset() – Reset the scale and translate to the initial state.
  • zoomIn(scale=2) – Zoom in.
  • zoomOut(scale=0.5) – Zoom out.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by jarvisniu, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin