v-zoom
v1.9.27
Published
It's the best way to zoom an image only used plain Javascript
Downloads
33
Readme
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)"
});
Methods
destroy()
vz.destroy();
Destroys the v-zoom instance, cleans up - removes event listeners, restores default, etc.
License
Licensed under MIT license, see LICENSE for the full license.