Skip to content

feat: enlarge gallery images in a Lightbox with prev/next navigation#390

Merged
zigzagdev merged 6 commits into
mainfrom
feat/gallery-image-lightbox
Jun 22, 2026
Merged

feat: enlarge gallery images in a Lightbox with prev/next navigation#390
zigzagdev merged 6 commits into
mainfrom
feat/gallery-image-lightbox

Conversation

@zigzagdev

@zigzagdev zigzagdev commented Jun 22, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add a Lightbox component (overlay + close button) for enlarging gallery images, scoped to the heritage-detail feature since it's only used there
  • Wire HeritageGallery's thumbnail click to open the Lightbox on the clicked image
  • Support closing via Escape key or clicking the overlay backdrop
  • Add prev/next navigation (on-screen arrows + Left/Right arrow keys) to move between gallery images without closing the Lightbox

Closes #391 (supersedes #142, #144 — pivoted from hero-image-swap to a Lightbox enlarge pattern)

Test plan

  • Click a gallery thumbnail on a heritage detail page and confirm it opens enlarged in the Lightbox
  • Confirm Escape key and clicking outside the image close the Lightbox
  • Confirm left/right arrows appear correctly (no left arrow on first image, no right arrow on last image) and navigate between images
  • Confirm Left/Right arrow keys also navigate

Add a fullscreen overlay with a close button as the foundation for
the gallery image enlargement view. Image rendering is added next.
Display the enlarged image with its alt text and optional credit
inside the overlay added previously.
Add lightboxImage state to HeritageDetailLayout and connect
HeritageGallery's onSelectImage to it, rendering the Lightbox so
clicking a gallery thumbnail enlarges the image.
Improve usability by letting users dismiss the enlarged image via
keyboard or by clicking the overlay backdrop, not just the close
button.
Lightbox is only used for enlarging gallery images on the heritage
detail page, so it doesn't belong in the generic shared UI primitives
directory.
Switch HeritageGallery's onSelectImage to pass the clicked image's
index instead of its data, and have Lightbox track the current index
within the full image list. This lets users navigate to the next or
previous photo with on-screen arrows (or Left/Right arrow keys)
without closing the Lightbox.

@zigzagdev zigzagdev left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok

@zigzagdev zigzagdev merged commit 0d528ba into main Jun 22, 2026
1 check passed
@zigzagdev zigzagdev deleted the feat/gallery-image-lightbox branch June 22, 2026 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Lightbox image enlargement with prev/next navigation

1 participant