starred/nginx-proxy-manager-NginxProxyManager

Fork 0

mirror of https://github.com/NginxProxyManager/nginx-proxy-manager.git synced 2026-04-25 01:15:51 +03:00

[PR #5213] feat: add screenshot gallery lightbox with mobile support #4095

New issue

Open

opened 2026-02-26 08:33:07 +03:00 by kerem · 0 comments

kerem commented

2026-02-26 08:33:07 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/NginxProxyManager/nginx-proxy-manager/pull/5213
Author: @alwaisy
Created: 1/24/2026
Status: 🔄 Open

Base: develop ← Head: feature/screenshot-gallery

📝 Commits (1)

56cc903 feat: add screenshot gallery lightbox with mobile support

📊 Changes

4 files changed (+506 additions, -33 deletions)

View changed files

➕ docs/.vitepress/theme/components/gallery-lightbox.vue (+437 -0)
➕ docs/.vitepress/theme/components/screenshot-img.vue (+30 -0)
📝 docs/.vitepress/theme/index.ts (+9 -1)
📝 docs/src/screenshots/index.md (+30 -32)

📄 Description

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

Ready for review.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/NginxProxyManager/nginx-proxy-manager/pull/5213 **Author:** [@alwaisy](https://github.com/alwaisy) **Created:** 1/24/2026 **Status:** 🔄 Open **Base:** `develop` ← **Head:** `feature/screenshot-gallery` --- ### 📝 Commits (1) - [`56cc903`](https://github.com/NginxProxyManager/nginx-proxy-manager/commit/56cc903ebd8b838fc1871fd4ee48a8c98b406544) feat: add screenshot gallery lightbox with mobile support ### 📊 Changes **4 files changed** (+506 additions, -33 deletions) <details> <summary>View changed files</summary> ➕ `docs/.vitepress/theme/components/gallery-lightbox.vue` (+437 -0) ➕ `docs/.vitepress/theme/components/screenshot-img.vue` (+30 -0) 📝 `docs/.vitepress/theme/index.ts` (+9 -1) 📝 `docs/src/screenshots/index.md` (+30 -32) </details> ### 📄 Description ## 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 - [x] Desktop: Click opens lightbox - [x] Desktop: Arrow buttons work - [x] Desktop: Keyboard navigation works - [x] Mobile: Swipe gestures work - [x] Mobile: Dot indicators work - [x] ESC key closes gallery - [x] Click outside closes gallery - [x] Both light/dark galleries work independently ## Screenshots/GIF ### Before https://github.com/user-attachments/assets/a7adadea-9c01-4ca4-9220-edc08343f1b9 ### After (Desktop) https://github.com/user-attachments/assets/f5fc08dd-1cca-4885-84d0-67965123113d ### After (Mobile) https://github.com/user-attachments/assets/30690eb1-d8be-47a8-aeda-f95496c8d094 Ready for review. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

kerem added the

pull-request

label

2026-02-26 08:33:07 +03:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/nginx-proxy-manager-NginxProxyManager#4095

No description provided.

Rows
Columns