UX: improve lightbox gallery zoom/navigation (PR #13500)

This PR improves navigation within lightboxes that contain multiple images.

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

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.

The result is that if you click on an image in a gallery, 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.

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.


I wonder how useful the click to zoom action is. To me it feels awkward and redundant, especially on touch devices, where users can pinch and zoom.

I wonder how useful the click to zoom action is.

It’s probably useful for things like large UI screenshots, graphs, charts, and so on.

I think it’s OK to keep it for now.

Would it make sense to disable it for touch devices?