Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benherbst/zoom-any-js
ZoomAny.js - Zoom anything, using Vanilla JavaScript. Also supports TypeScript
https://github.com/benherbst/zoom-any-js
javascript library web
Last synced: 2 days ago
JSON representation
ZoomAny.js - Zoom anything, using Vanilla JavaScript. Also supports TypeScript
- Host: GitHub
- URL: https://github.com/benherbst/zoom-any-js
- Owner: BenHerbst
- License: apache-2.0
- Created: 2024-06-29T21:29:17.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-07-08T14:41:48.000Z (4 months ago)
- Last Synced: 2024-10-31T09:36:44.681Z (19 days ago)
- Topics: javascript, library, web
- Language: TypeScript
- Homepage: https://zoomanyjs.benherbst.net/
- Size: 5.28 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# https://zoomanyjs.benherbst.net/
ZoomAny.js
Zoom literally **ANY** HTML Element using pure vanilla JavaScript.
_\*Supports TypeScript_
## Features
- TypeScript support
- Uses relative and not absolute position ( keep same place, just make zoomable )
- Enable zoom for any HTML Element you want, not just images
- Boundings
- Fully controlable via functions and data-* attributes
## Install
Install via NPM:
```
npm i zoom-any-js
```
Or via CDN:
```
CSS: https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.css
JS: https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.js
```
## Basic Usage
To get started, add the class "zoomable" to the element you want to enable zoom on:
``` html
```
### NPM + Bundler:
Then create a new instance in JavaScript, and import the CSS:
``` javascript
import ZoomAnyJs from "zoom-any-js";
import "zoom-any-js/dist/zoom-any-js.css";
const zoom = new ZoomAnyJs()
```
### CDN:
``` html
```
``` html
import ZoomAnyJs from "https://cdn.jsdelivr.net/npm/zoom-any-js@latest/dist/zoom-any-js.js"
const zoom = new ZoomAnyJs()
```
Now try to zoom into your image, it should start to zoom! 🎉
## Examples
Go to center on click:
``` ts
document.getElementById("img").addEventListener("click", () => {
zoom.center()
zoom.apply()
})
```
Zoom into the screen center:
``` js
zoom.zoomAt(1.1, { x: window.innerWidth / 2, y: window.innerHeight / 2 })
zoom.apply()
```
Using the wrapper class:
``` html
TEEEEEEST
```
This keeps it inside the wrapper div and makes you zoom into it without any overflow.
Whatsapp or Windows Photos like Image Zoom:
``` html
```
Multiple images:
Each gets their own instance, and you pass a css selector into the constructor like this:
``` js
const zoom1 = new ZoomAnyJs()
const zoom2 = new ZoomAnyJs(".zoom2")
const zoom3 = new ZoomAnyJs("#zoom3")
```
## Options
Basic options can be set by using data-* attributes on the element you zoom:
- data-max-zoom: Set maximimum zoom. Default: 4000
- data-min-zoom: Set minimum zoom. Default: 10
- data-bounds: Enable fit to bounding. Default: false
- data-origin-parent: Use the _offsetParent_ as origin for fitting bounding. Else it uses window. Default: false
_The default zoom level is 100, which is the original size and represents a scale of 1.0_
## Control via JavaScript
The instance, so in this case _const zoom_, has many functions which you can use to fully control the libary.
**You need to call .apply() to update the view to the changes!!!**
All available functions:
- center(): Moves the image to the center of the window or the offsetParent when using data-origin-parent
- fitToBounds(): Fits into the bounds when using data-bounds, else it just returns void
- zoomAt(amplitude: number, pos: {x: number, y: number}): Move to the position by the amplitude. Amplitude > 1 zooms in and amplitude < 1 zooms out
- addListeners(): Adds the event listeners
- removeListeners(): Removes the event listeners
- apply(): Has to be callen to update the view. Without calling it, you cant see any change
- destroy(): Makes the element "normal" again, as before running the zoom library
- reset(): Resets position and zoom to default values
- getZoom(): Returns the zoom
- setZoom(value: number): Sets the zoom
- getPos(): Returns the position
- setPos(value: {x: number, y: number}): Sets the position