Multiple issues in zoom plugin, workarounds and fixes

[istinnstudio]

I have tried the zoom plugin in my image gallery, I have soon realized that is plagued by some really frustrating issues. I have tried several workarounds and fixes, and although not perfect, are pretty much useable, so I share the final result. I have created a minified js as direct replacement of the official version 2.9.0. I am not currently going to create a PR as it is more or less a personal experimental workaround for my website and might be incomplete or rise side effects for others. Reference on changes bellow might also be incomplete and can be misleading, I provide it as a general sense of what it is all about. If you have better solutions, you can share your findings here... Someone more experienced could create a strong PR in the future. I am not an expert so do not blame me or ask for support for what you see or discover, this is AI (Gemini pro and Kimi K2) with some complex prompts and several attempts.

lg-zoom.umd.min.patched_v1.js

This table is formatted to be easily readable for developers, outlining the problem in the official build, how Mod v1 solves it, and the specific code mechanisms changed.

LightGallery Zoom: Official v2.9.0 vs. Zoom Mod v1

Feature / Bug	Official v2.9.0 Behavior	Zoom Mod v1 Behavior	Technical Fix & Code Impact
Viewport Centering Hack (positionChanged)	Hardcoded a positionChanged boolean. If a user panned an image, the very next zoom action would aggressively overwrite the zoom target coordinates (pageX/pageY) to the center of the viewport, overriding user intent.	Removed entirely. The script no longer forcefully erases the user's explicit zoom anchor. Cursor-targeted zooming and pinch-zooming are natively respected at all times.	Completely stripped all positionChanged = !0 / !1 flags and its associated coordinate-overwriting logic from zoomImage(), zoomDrag(), zoomSwipe(), and the init loops.
UI Button Coordination (+ / -)	Relied on the flawed positionChanged hack to ensure that clicking the UI buttons zoomed into the center of the screen after panning.	Safely targets the viewport center only when UI buttons are actively clicked, leaving mouse-wheel and pinch-zoom behavior untouched.	Injected explicit e.setPageCords() calls immediately before e.beginZoom(o) exclusively inside the #lg-zoom-in, #lg-zoom-out click listeners and zoomIn() function.
Mobile Panning "Lock" Bug	When pinch-zooming out near the edge of an image, the boundary constraints were ignored (o = !1). The image would shrink out-of-bounds. Upon the next touch, strict edge-friction (/ 6) was applied, causing the panning to feel "locked" or stuck.	Dynamically checks boundaries when fingers are lifted off the screen. If the image is out of bounds, it gracefully slides the image back into legal bounding boxes.	Upgraded the touchend phase of pinchZoom(). Added boundary recalculation via getPossibleSwipeDragCords() and getDragAllowedAxises(0), forcefully sliding out-of-bounds coordinates back using setZoomSwipeStyles().
Native Mouse Wheel Zooming	Not natively supported. Relied on third-party wrapper code or PRs that implemented rigid scale-stepping, resulting in severe lag or jumping on smooth trackpads (like MacBooks).	Fully Integrated & Optimized. Natively binds wheel events. Detects if input is a discrete mouse wheel or a smooth trackpad. Zooms precisely into the mouse cursor's X/Y coordinates.	Added wheelZoom: !0 to defaults. Created the wheelZoom() prototype. Detects deltaY < 50 (trackpads) and temporarily strips the 300ms CSS transition via the lg-zoom-dragging class to allow butter-smooth fractional scale math (deltaY * .005).
"Actual Size" Trapdoor Bug (Native Res)	When viewing an image at "Actual Size" (1:1), the DOM uses raw hardcoded pixel width/height. If a user zoomed out via UI buttons, the plugin blindly reset the pan position to 0,0 (center), causing a jarring teleportation.	Preserves Pan State. Smoothly converts the hardcoded pixel dimensions back into standard CSS scale3d math without losing the user's current pan coordinates.	Injected "trapdoor" logic into the UI buttons and wheelZoom(). Checks e.core.outer.hasClass("lg-actual-size"). If true, it temporarily saves cL = e.left; cT = e.top;, performs the resetImageTranslate() wipe, and seamlessly restores e.left = cL; e.top = cT;.

Table Update for Mod v1 Documentation

If you are maintaining the document, you can add this final row:

Feature / Bug	Official v2.9.0 Behavior	Zoom Mod v1 Behavior	Technical Fix & Code Impact
Pinch-Zoom Limit Inconsistency	Ignored the plugin's infiniteZoom configuration. Forcibly snapped the image back to 1:1 "Actual Size" native resolution if the user pinched too far. UI buttons and the mouse wheel did not share this restriction.	Unchains pinch-zoom and respects the infiniteZoom setting. If infiniteZoom: true, users can pinch to magnify beyond native resolution perfectly smoothly.	Modified the touchend phase of pinchZoom(). Changed the snap-back condition from if(e.scale>=s) to if(e.scale>=s && !e.settings.infiniteZoom).

[scratchmex]

the problem with the minified versiomn you share is that we cannot se the modifications. prompt the AI to modify the source file https://github.com/sachinchoolur/lightGallery/blob/master/src/plugins/zoom/lg-zoom.ts and reupload. thanks for the effort.

I am also trying to solve some zoom issues: 1) wheel zoom, 2) slow/wedged acceleration when zooming on mobile

[istinnstudio]

Yes I know. But I do not have a dev environment so the way was a controversial experimental try to fix the official minified version with AI and this just worked well for me. So I cannot provide a proper PR. But you can still try the minified version standalone and see if it fits your needs. Believe it or not, AI could imagine the minified version functionality and proceed to the requests (If I remember correctly I had provided also the original typescript but I am not sure at what stage). But it was a bit messy back and forth. You can still compare yourself the minified versions though and prompt the AI to figure out of a proper PR, feeding all 3 files, 2 minified js and 1 full typescript.