Skip to content

Conversation

@alwaisy
Copy link

@alwaisy alwaisy commented Jan 24, 2026

Summary

Adds an interactive lightbox gallery for the screenshots page with full keyboard and touch navigation support.

Changes

  • Created docs/.vitepress/theme/components/gallery-lightbox.vue component for fullscreen modal
  • Created docs/.vitepress/theme/components/screenshot-img.vue wrapper component for click handling
  • Updated docs/.vitepress/theme/index.ts to register new components
  • Updated docs/src/screenshots/index.md to use new components

Features

  • Click any screenshot to open fullscreen lightbox
  • Desktop: Arrow buttons for navigation
  • Mobile: Swipe gestures + dot indicators
  • Keyboard: Arrow keys (←/→) and ESC to close
  • Image counter showing current position
  • Separate galleries for light/dark mode
  • Stops at boundaries (no infinite loop)

Mobile Optimizations

  • Arrow buttons hidden on ≤768px screens
  • Dot indicators shown on mobile
  • Full-width edge-to-edge images
  • Touch swipe left/right for navigation

Testing

  • Desktop: Click opens lightbox
  • Desktop: Arrow buttons work
  • Desktop: Keyboard navigation works
  • Mobile: Swipe gestures work
  • Mobile: Dot indicators work
  • ESC key closes gallery
  • Click outside closes gallery
  • Both light/dark galleries work independently

Screenshots/GIF

Before

Screencast.From.2026-01-24.13-53-44.mp4

After (Desktop)

Screencast.From.2026-01-24.13-53-44.mp4

After (Mobile)

Screencast.From.2026-01-24.13-56-26.mp4

Ready for review.

- Add GalleryLightbox component with fullscreen modal
- Add ScreenshotImg wrapper component for click handling
- Support keyboard navigation (arrows, ESC)
- Support touch/swipe gestures on mobile
- Add dot indicators for mobile navigation
- Preserve original inline-img thumbnail layout
- Separate galleries for light/dark mode screenshots

Mobile optimizations:
- Hide arrow buttons, show dot indicators
- Full-width images with edge-to-edge display
- Touch swipe support for navigation
@nginxproxymanagerci
Copy link

Docker Image for build 1 is available on DockerHub:

nginxproxymanager/nginx-proxy-manager-dev:pr-5213

Note

Ensure you backup your NPM instance before testing this image! Especially if there are database changes.
This is a different docker image namespace than the official image.

Warning

Changes and additions to DNS Providers require verification by at least 2 members of the community!

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.

1 participant