Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vaheqelyan/svelte-zoom
Nearly native image scaling in web (:iphone:/:computer:), rich in functionality. This will make your mobile users happy
https://github.com/vaheqelyan/svelte-zoom
browser image mobile pinch-to-zoom svelte zoom
Last synced: 9 days ago
JSON representation
Nearly native image scaling in web (:iphone:/:computer:), rich in functionality. This will make your mobile users happy
- Host: GitHub
- URL: https://github.com/vaheqelyan/svelte-zoom
- Owner: vaheqelyan
- License: mit
- Created: 2020-08-17T09:45:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-27T17:24:44.000Z (about 1 year ago)
- Last Synced: 2024-12-11T10:37:12.300Z (17 days ago)
- Topics: browser, image, mobile, pinch-to-zoom, svelte, zoom
- Language: Svelte
- Homepage:
- Size: 427 KB
- Stars: 77
- Watchers: 3
- Forks: 9
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NOT MAINTAINED :(
### svelte-zoom
Nearly native image scaling (:iphone:/:computer:), rich in functionality. It is extremely easy to use. it's built by comparing scaling features existing in 'Gallery' apps for smartphones. It doesn't seem slow, but it doesn't seem ridiculously fast either, to be honest, I didn't measure performance. This will also boost your mobile app and website user experience.
[Preview](https://svelte.dev/repl/1b2917a84eca46868fee174dd8a81218?version=3.24.1)
###### Note
> The image must take up the entire width and height of the page
### Features
---
#### Mobile
- Pinch
- Pan
- Touch move
#### Desktop
- Mouse wheel
- Mouse move
#### General
- Maximum scaling value calculated automatically
- The image is limited by its aspect ratio
- It is lightweight
- It feels "native"
### Installation
###### via NPM
```
npm i svelte-zoom
```
### Usage
```svelte
```
### Manual zooming
If for some reason you want to zoom in by calling the function manually. You can use the `zoomIn` and `zoomOut` functions. It will scale in the center of the image.
```svelte
import Zoom from 'svelte-zoom'
let zoom;
zoom.zoomIn()}>Zoom in
zoom.zoomOut()}>Zoom out
```