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:
Usage
If you’re using a bundler, e.g. webpack, you’ll need to import v-zoom.
;
To create v-zoom instance.
VZoom;# OrVZoom;# OrVZoom;
Configuration is optional and passed in an object {}.
Usage example
VZoom;
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 instancelet vz = VZoom;
Methods
destroy()
vz;
Destroys the v-zoom instance, cleans up - removes event listeners, restores default, etc.
License
Licensed under MIT license, see LICENSE for the full license.