Zoom via gestures on mobile

[garretwilson]

Could you clarify your support for zoom using gestures (spreading and pinching) on mobile?

I'm trying to decide between fslightbox and nanogallery2. I want to use the Vanilla JavaScript product, and I have absolutely no problem paying for your Pro version.

nanogallery2 has smooth zooming on mobile by using the standard spread and pinch gestures with your thumb and finger. But the fslightbox Plain Vanilla demo didn't seem to support zoom. When I tried to zoom in the standard view, it actually zoomed the whole browser display, including the content behind the lightbox. In fullscreen mode, I couldn't get zoom to work at all.

The fslightbox React Pro demo did support zoom gestures on mobile (although it was a little clunky compared to nanogallery2). But I don't want to use React. I like that you provide your product in a plain JavaScript library with no need for JQuery or even CSS.

Can you clarify whether your Plain Vanilla fslightbox product supports zooming on mobile using gestures, and whether it is in the free or Pro version only? Thank you.

[piotrzdziarski]

Zooming in basic version is available only via browser built-in pinch system. In pro version it was programmatically improved to be smoother. What browser and system are you using that you say it's clunky? FsLightbox across different JS environments(Vanilla, React, Vue) looks completely the same. Difference is between basic and pro version. So Vanilla JS Pro and React Pro looks the same(including zooming).

[garretwilson]

FsLightbox across different JS environments(Vanilla, React, Vue) looks completely the same. … So Vanilla JS Pro and React Pro looks the same(including zooming).

Thank you for clarifying that I would get zooming gestures in the Plain Vanilla Pro version.

Zooming in basic version is available only via browser built-in pinch system.

OK, but that's a different type of zooming. In that case the zooming magnifies the entire browser, as I mentioned.

What browser and system are you using that you say it's clunky?

Right this moment I'm testing zooming on a Samsung Galaxy S10 variation using the React Pro demo:

• When using the zoom gesture multiple times, each time I zoom, the image zooms slower and slower. Apparently you are using the size of the zoom gesture to calculate how many much to zoom the original image (or you are calculating pixels based upon the zoom gesture size), but you don't seem to be factoring in the amount the image is already zoomed. That is, the number of pixels zoomed should be more. This is especially evident once I zoom past the point of pixel-per-pixel viewing (i.e. past a 1:1: factor); apparently you are calculating zoom pixels based upon the original image, not on the number of pixels actually shown (which have been multiplied at the zoom factor). So each wide zoom gesture only makes the image zoom or unzoom a little once it has been magnified. I would guess that in your "number of logical pixels to zoom in or out" you simply neglected to multiply by the current zoom factor, or something like that.
• If I zoom a picture, and then use a single finger to move it around the screen (as I would expect to be able to do), I can move it completely off the screen where it disappears. This isn't so bad, but not expected. (See next point.)
• Once a picture is zoomed, I have no way to swipe to the next picture. I swipe and swipe, and the image disappears; I have to unzoom before going to the next picture. In other words, zooming breaks swiping.

Things like that make me call this implementation "clunky". I'm sure you could fix them. Try using a competing product and compare the functionality.

I hope this helps. Thanks again for confirming that I will get true zooming even on the Plain Vanilla JavaScript version.

[piotrzdziarski]

Thank you for advices! 'Accelerating' zooming is already implemented when using scroll so there will be no problem with adding it also for pinching. I will think about the second advice and how to resolve it. I'm leaving this issue open until all problems will be fixed.

[garretwilson]

@piotrzdziarski I appreciate your being receptive for feedback. I'm enthusiastic about your product, especially as it is lightweight and is pure JavaScript, without requiring JQuery.

For the moment I think the interface of nanogallery2 is a little better, although I wish it was more lightweight and didn't require JQuery and a CSS file.

I am considering purchasing your Pro version, even if I use a different product for now, to encourage you to improve your product. However I don't exactly understand the licensing terms, so I filed a separate Issue #143 to get clarity on that.

[gusberco]

In the pro version of the package, it seems that there is an issue with the zoom acceleration, particularly in Chrome mobile. If the image is tapped once to scale the image then the gestures are not working as expected. They become slow and sometimes not responsive at all. This problem does not seem to occur in other mobile browsers.

[AndrewHaine]

I've noticed the same thing, iOS browsers appear to work fine when pinching to zoom but in Chrome for Android it will occasionally drag the current image instead of zooming in, when it does successfully zoom it it will often get stuck at the increased size.

[joshmelikian]

@piotrzdziarski Is there an update on this issue? I'm also having an issue with pinching to zoom in the pro edition that only applies to Chrome for Android - particularly the issue stated by @garretwilson.

[djloom]

@piotrzdziarski after purchasing the pro react version pinch zooming is not working on android chrome browser. Same issue as @AndrewHaine