Lightbox
Sobreposição de imagem em tela cheia com navegação por teclado e suporte a toque. Disponível como visualizador de imagem única ou galeria com navegação anterior/próximo, exibição de contador e grade de miniaturas.
Única
Abre uma única imagem em sobreposição de tela cheia com legenda opcional
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
█████ █ ████████████
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_single_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ █████████ ██
███████ █████████████
██████████████████████████████████
██████████████
██████████ ████████████████████████ ████
lightbox_single_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███████████ ████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████ █ ████
██████████████ █ ███████████████ ██ ██
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
Galeria
Galeria de imagens com navegação anterior/próximo, contador e suporte a teclado
_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
Obter Acesso Completo
Desbloqueie o código-fonte deste componente e de todos os outros. Pagamento único para acesso vitalício.
Obter Acesso Agora