Lightbox
Fullscreen image overlay with keyboard navigation and touch support. Available as a single-image viewer or a gallery with prev/next navigation, counter display, and thumbnail grid.
Single
Opens a single image in a fullscreen overlay with optional caption
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
█████ █ ████████████
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_single_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ █████████ ██
███████ █████████████
██████████████████████████████████
██████████████
██████████ ████████████████████████ ████
lightbox_single_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███████████ ████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████ █ ████
██████████████ █ ███████████████ ██ ██
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Gallery
Image gallery with prev/next navigation, counter, and keyboard support
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████ ██
██
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_gallery_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ ████ ██
████ ██████████ ████████████ ████
██ ██████████████████████ ██ ███████ ██████ ██
███████ █████████████
██████████████████████████████████
lightbox_gallery_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ ████████ ██████████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████████████ █ ████████████
█████ █ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Changelog
- v1.0.0: Initial release with single and gallery styles
- Fullscreen overlay with backdrop
- Keyboard navigation (Escape, Arrow keys)
- Touch swipe support for gallery
- Optional captions and image counter
- Preloads adjacent images
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now