vaheqelyan / svelte-zoom Goto Github PK

View Code? Open in Web Editor NEW

76.0 3.0 9.0 437 KB

Nearly native image scaling in web (:iphone:/:computer:), rich in functionality. This will make your mobile users happy

License: MIT License

JavaScript 32.80% Svelte 67.20%

svelte image pinch-to-zoom mobile zoom browser

svelte-zoom's Introduction

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

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

<Zoom src="URL" alt="..." />

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.

<script>
import Zoom from 'svelte-zoom'

let zoom;
</script>
<Zoom src="..." alt="..." bind:this={zoom} />

<button on:click={() => zoom.zoomIn()}>Zoom in</button>
<button on:click={() => zoom.zoomOut()}>Zoom out</button>

svelte-zoom's People

Contributors

Stargazers

Watchers

Forkers

sharifclick pfz thurti bryanwills cyan-2048 jh2229 wahed-attensi rgon matthiasharzer

svelte-zoom's Issues

Option to allow deeper zoom

Hi,
cool Library!
It would be cool to have an option that would allow to zoom further in until we get an 1:1 pixel ratio (or even further)

Best,
tomthe

Using touch functionality removes mouse pan functionality

By default, when zooming or panning by touch, it is no longer possible to pan by mouse-click

REPL example - drag and move image - jams, does not move

REPL example - drag and move image - jams, does not move.
I checked in Firefox.

Manual Panning

i want to use this using a dpad

Zoomed image slips out of bounds on 5 finger touch

If you touch the zoomed in image with 5 fingers at once, there is chance that the image slips out of bounds.
I fixed this by checking the number of touches more explicit in onTouchStart() and onTouchMove().

Must remove scroll event listeners on destroy

Otherwise it will keep preventing scroll after navigating

doesn't seem to work anymore [Svelte 4]

the style is stuck to translate(0px, 0px) scale(1) or transform: matrix(1, 0, 0, 1, 0, 0);

Firefox support

This module is great however it seems to only work well on Chromium browser Firefox seems to act weirdly and even more so on mobile version of the browser

On desktop trying to drag the image around tries to drag and drop the image
On mobile it tries to scroll the view

None of these issues exist on Chromium browsers

tested with:
https://svelte.dev/repl/1b2917a84eca46868fee174dd8a81218?version=3.24.1

Image doesn't scale to full resolution if height > width

If the image height is greater than the width the image doesn't scale to its full resolution.
This is because max.scale is based on image width only.

I don't know if this is intended. I will provide a pull request in case it's not...

Error on double tap to zoom in/out

Double tap to zoom in/out results in js error.
I will provide a pull request.

demo doesn't work

Zoomed image appears pixelated/blurry

Sorry for spamming pull requests. This is the last one :)

This one is a little bit hard to reproduce. I only had this behavior on a low spec embedded device.
When you zoom in with pinch zoom the image appears blurry and kind of pixelated. This doesn't happen when using the manual zoom function.

I'm not an expert on this whole browser gpu rendering stuff. But to me it looks like the browser (in my case Chrome) doesn't update the GPU rendered representaiton of the image after zooming in. Instead it shows a scaled version of the initial (zoomed out) image.

I was able to fix this by dynamically adding and removing will-change: transform on fireUp() and fireDown(). This is also what is the recommended use of will-change according to mdn.

Let me know if anyone have more insights into this...