1. Why Most Web Lightboxes Break Accessibility
A major flaw in third-party lightbox scripts is accessibility compliance. When a modal opens, keyboard navigation (Tab / Shift+Tab) should be strictly trapped within the active dialog. If focus leaks behind the overlay to underlying page links, screen reader users become lost.
Additionally, modern mobile devices require touch pinch-to-zoom and pan gestures when viewing high-resolution product photography. I designed `gallery-js` from scratch to combine a lightweight thumbnail grid engine with an accessible, touch-fluid lightbox modal.
2. Key Design Features
- Responsive Masonry & Grid Layouts: Dynamic thumbnail grid calculations without external layout libraries.
- Keyboard & Focus Trap Management: Automatically traps keyboard focus inside the lightbox container (`role="dialog"` with `aria-modal="true"`) and restores focus on close.
- Mobile Touch & Pinch-Zoom: Supports multi-touch pinch zooming, double-tap zoom, and inertia swipe gesture navigation between photos.
- Zero Dependencies: Sub-6KB compressed size, supporting both Vanilla JS ESM and optional jQuery plugin bindings.
3. Open Source Repository
Explore gallery-js on GitHub: github.com/Modracx/gallery-js.