Simple And Customizable Image Zoom Component - vue-magnifier

Install & Download:

# NPM
$ npm i @websitebeaver/vue-magnifier

Description:

A simple, customizable, touch-enabled image zoom component for Vue apps.

How to use it:

1. Import the VueMagnifier component.

import VueMagnifier from '@websitebeaver/vue-magnifier'
import '@websitebeaver/vue-magnifier/styles.css'

2. Add the VueMagnifier component to the template and define the path to the image as follows:

<template>
  <VueMagnifier src="./path/to/image" width="600" />
</template>

3. Default component props.

// Image
src = '',
width = '100%',
height = 'auto',
className = '',
// Zoom image
zoomImgSrc = '',
zoomFactor = 1.5,
// Magnifying glass
mgWidth = 150,
mgHeight = 150,
mgBorderWidth = 2,
mgShape = 'circle',
mgShowOverflow = true,
mgMouseOffsetX = 0,
mgMouseOffsetY = 0,
mgTouchOffsetX = -50,
mgTouchOffsetY = -50,
// Custom prop to show or hide magnifying glass
mgShow = true,
// Custom prop for magnifying glass border background color
mgCornerBgColor = '#fff',