Lightbox
Superposición de imagen a pantalla completa con navegación por teclado y soporte táctil. Disponible como visor de imagen individual o galería con navegación anterior/siguiente, contador y cuadrícula de miniaturas.
Individual
Abre una imagen individual en una superposición a pantalla completa con subtítulo opcional
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
█████ █ ████████████
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_single_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ █████████ ██
███████ █████████████
██████████████████████████████████
██████████████
██████████ ████████████████████████ ████
lightbox_single_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███████████ ████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████ █ ████
██████████████ █ ███████████████ ██ ██
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Galería
Galería de imágenes con navegación anterior/siguiente, contador y soporte de teclado
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████ ██
██
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_gallery_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ ████ ██
████ ██████████ ████████████ ████
██ ██████████████████████ ██ ███████ ██████ ██
███████ █████████████
██████████████████████████████████
lightbox_gallery_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ ████████ ██████████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████████████ █ ████████████
█████ █ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Registro de Cambios
- 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
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso