V-zoom NPM | npm.io

V-Zoom

A simple Javascript library for image zooming.

Demo

https://vdifoung.github.io/v-zoom/

Installation

Installing a V-Zoom module

V-Zoom is delivered primarily via npm. (https://www.npmjs.com/package/v-zoom)

# using npm install
$ npm i v-zoom

Non-module environments

If, for any reason, you are constrained to a non-module environment (e.g. no bundlers such as webpack) - don’t fret. Just embed:

<script src="dist/js/v-zoom.min.js"></script>

Usage

If you’re using a bundler, e.g. webpack, you’ll need to import v-zoom.

import "v-zoom";

To create v-zoom instance.

VZoom.init("tagName", {options});
# Or
VZoom.init("#myID", {options});
# Or
VZoom.init(".className", {options});

Configuration is optional and passed in an object {}.

Usage example

VZoom.init("img", {
    zoomEffect: "translate",
    duration: "500",
    backgroundColor: "rgba(0,0,0,.95)"
});

Options

Config Option	Type	Default	Description
`zoomEffect`	`String`	`translate`	`"translate"` or `"scale"` Choose the zoom effect style.
`duration`	`Number\\|String`	`279`	Time to execute (ms)
`backgroundColor`	`String`	`rgba(0.0.0.1)`	Background color. Example: `"#000"` or `"rgba(0.0.0.1)"`
`scrollToCancel`	`Boolean`	`true`	Scrolling to cancel the image is being zoomed
`zoomPercentage`	`Number`	`50`	`50%`. Percentage of zoomed picture's size is compared with screen's size. To change zoom scale for each picture, use `data-vzoom-scale="Number"` attribute Example: `<img src="img/thumbnail.png" data-vzoom-scale="1.95">`

The v-zoom instance

// Retrieving the v-zoom instance
let vz = VZoom.init("img", {
    zoomEffect: "translate",
    duration: "500",
    backgroundColor: "rgba(0,0,0,.95)"
});