Lightbox
Overlay immagine a schermo intero con navigazione da tastiera e supporto touch. Disponibile come visualizzatore immagine singola o galleria con navigazione precedente/successivo, contatore e griglia miniature.
Singola
Apre una singola immagine in un overlay a schermo intero con didascalia opzionale
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
█████ █ ████████████
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_single_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ █████████ ██
███████ █████████████
██████████████████████████████████
██████████████
██████████ ████████████████████████ ████
lightbox_single_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███████████ ████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████ █ ████
██████████████ █ ███████████████ ██ ██
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Galleria
Galleria immagini con navigazione precedente/successivo, contatore e supporto tastiera
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████ ██
██
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_gallery_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ ████ ██
████ ██████████ ████████████ ████
██ ██████████████████████ ██ ███████ ██████ ██
███████ █████████████
██████████████████████████████████
lightbox_gallery_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ ████████ ██████████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████████████ █ ████████████
█████ █ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Registro delle modifiche
- 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
Ottieni l'Accesso Completo
Sblocca il codice sorgente di questo componente e di tutti gli altri. Un solo pagamento per l'accesso a vita.
Ottieni l'Accesso Ora