Giters

willnguyen1312 / zoom-image

A little yet powerful framework agnostic headless library to zoom images on the web

Home Page:https://willnguyen1312.github.io/zoom-image/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

better mobile experience

niklasgrewe opened this issue · comments

commented

Hi, thanks for this good agnostic library. It is indeed not easy to find a zoom image library that is 1. agnostic, 2. supports both desktop and mobile and 3. is still maintained. Really good work

The only thing I personally still miss is the native feeling on phones and tablets. There you can zoom in and move the image at the same time. If you zoom out too much and let go of the image, the original size and position is restored. If you tap twice on a certain spot in the image, it is zoomed in. If you then tap the image twice again, it will be zoomed out again.

And what is also a problem is the context menu in Safari. If you press too long on an image, the context menu opens.

For these reasons I still use this library at the moment: https://github.com/manuelstofer/pinchzoom

A demo can be found here:
https://manuelstofer.github.io/pinchzoom/demo/pinchzoom.html

I would be very happy if you would implement some of this.

commented

Hi @niklasgrewe, thanks for your feedback on the library. I would like to answer your points as follow:

  1. "If you tap twice on a certain spot in the image, it is zoomed in. If you then tap the image twice again, it will be zoomed out again" - This is very nice to have, I will implement it. Sorry, I totally didn't pay attention to that
  2. "And what is also a problem is the context menu in Safari. If you press too long on an image, the context menu opens" - We totally could do that but it's not so good from an accessibility standpoint as it's a built-in feature of platforms to allow users to download image. I did use a div element before with background-image instead of img tag, but it seems to be not good in the long run. I think I will start working on something to let users choose whether or not context menu should be open :)
  3. "Zoom in and move the image at the same time" - I think the current experience can be improved, I will start working on that when I could :)
  4. I didn't set out to achieve the same experience as the native platform, to be honest. As you could see from the demo below, the zooming feature is actually provided by the native platform already except for the double tab - I'm not sure if the library pinchzoom achieved the same thing as native experience. I checked out the code, it doesn't seem to be the case 😅 . I tried to avoid such an experience as I didn't want users to lose context around the image - Pinchzoom.js text was hidden when I zoomed in, in contrast to my demo which kept text remained visible
zoom.feature.MP4
commented

#153 should do the trick :) Thanks so much for your feedback, it means a lot to my learning and development to this open source software 😊