Vue.js Zoom or Scale Single or Gallery Multiple Images in Browser Using vue-zoomer Library and Javascript Full Project For Beginners

You are currently viewing Vue.js Zoom or Scale Single or Gallery Multiple Images in Browser Using vue-zoomer Library and Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be zooming or scaling single or multiple gallery images using vue-zoomer library in browser using javascript.All the full source code of the application is shown below.

 

 

 

 

Get Started

 

 

 

In order to get started you need to make an new vue.js project and install the below library as shown below

 

 

npm i vue-zoomer

 

 

vue-zoomer

Zoom the image or other thing with mouse or touch

For Vue 3

This library has released a Vue 3 beta version here.

Demo

Usage

 

 

Import:

import Vue from 'vue'
import VueZoomer from 'vue-zoomer'

Vue.use(VueZoomer)

Single usage:

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

<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 5;
  • minScale: number – Minimum scale limit, default is 1;
  • 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;
  • zoomingElastic: boolean – Whether to use the elastic effect when reaching the max/min zooming bounds, default is true;
  • 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;
  • mouseWheelToZoom: boolean – Whether to zoom in/out the content by mouse wheel, 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' – Same as above;
  • zoomingElastic: boolean – Same as above;
  • limitTranslation: boolean – Same as above;
  • doubleClickToZoom: boolean – Same as above;
  • mouseWheelToZoom: boolean – Same as above;

<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.

Leave a Reply