discourse/app
Joe 7e5ad9aaaa
UX: improve lightbox gallery zoom/navigation (#13500)
This PR improves navigation within lightboxes that contain multiple images for both touch and non-touch devices.

Currently, if a gallery contains multiple large images, and you click on the one currently displayed, two things happen. 

1. we zoom in
2. we navigate to the next image

a0bbc346cb/app/assets/javascripts/discourse/app/lib/lightbox.js (L43-L49)

So, you get taken to the next image, and it shows zoomed in, even when the intention was to zoom in on the previous image.

Magnific popup has an option to disable image-click navigation in galleries. This PR toggles that on for non-touch devices.

The result is that if you click on an image in a gallery on a non-touch device, we zoom in on that image instead of navigating to the next one.

This has no impact on arrow/keyboard navigation.

Magnific popup also has an API when images change; we reset the zoom class when that happens. So, when you navigate to the next image, it won't be zoomed in.

For touch devices, clicking on the image will navigate to the next one without zooming in. Users can pinch-zoom if they want to see more details on touch devices.

I used jQuery for this because both Magnific popup and our implementation for this are based on jQuery. No point making a few lines use vanilla for this when the rest doesn't.
2021-06-24 00:32:17 +08:00
..
assets UX: improve lightbox gallery zoom/navigation (#13500) 2021-06-24 00:32:17 +08:00
controllers PERF: Remove n+1 in user directory (#13501) 2021-06-23 10:45:18 -05:00
helpers PERF: Eager load Theme associations in Stylesheet Manager. 2021-06-21 11:06:58 +08:00
jobs PERF: Update post uploads secure status in a job (#13459) 2021-06-21 19:15:24 +03:00
mailers FIX: Remove duplicate add_unsubscribe_link hash key (#13467) 2021-06-22 11:25:39 +10:00
models FIX: Ignore missing uploads in theme settings (#13486) 2021-06-22 22:34:22 -04:00
serializers PERF: Remove n+1 in user directory (#13501) 2021-06-23 10:45:18 -05:00
services FIX: Add word boundaries to replace and tag watched words (#13405) 2021-06-18 18:54:06 +03:00
views Code review comments. 2021-06-21 11:06:58 +08:00