Einzelbild

Öffnet ein einzelnes Bild in einem Vollbild-Overlay mit optionaler Bildunterschrift

_lightbox.html.erb

███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
  █████ █ ████████████
  ███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██

████ ██████████████████████████
     ███████████████████████████████ ███████████ ███
     █████████████████████████████ ████ ███
     ██████████ ███████████████ ████

Get Access to View Code

lightbox_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
  ██████ ██████ █ █
    ███████ ██████
    ████████ █ █████ ███████ ████████ █ ██
    █████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

lightbox_single_component.html.erb

████ ██████████████████████████
     ███████████████████████████████ ███████████ ███
     █████████████████████████████ ████ ███
     ██████████ █████████████████ ████

  ███ █████████ █████████ ██
  ███████ █████████████
          ██████████████████████████████████
          ██████████████
          ██████████ ████████████████████████ ████

Get Access to View Code

lightbox_single_component.rb

█ ██████████████████████ ████

█████ ███████████████████████ █ ███████████████████
  ███████████ ████████ ██████████████ █████

  ███ ███████████████████ █████████████ █████ █████ ██████ ██████████
    ███████ █ ██████
    █████████████ █ ████████████
    █████ █ ████
    ██████████████ █ ███████████████ ██ ██

Get Access to View Code

lightbox_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
  ██████ ██████ █ █
    ███████ ██████
    ████████ █ █████ ███████ ████████ █ ██
    █████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`images` *	Array	erforderlich	Array of image hashes with :src, :alt, and optional :caption
`show_caption`	Boolean	`true`	Whether to display the image caption in the overlay
`zoom`	Boolean	`false`	Whether to enable zoom on the image

Name	Typ	Standard	Beschreibung
`images` *	Array	erforderlich	Array of image hashes with :src, :alt, and optional :caption
`show_caption`	Boolean	`true`	Whether to display the image caption in the overlay
`zoom`	Boolean	`false`	Whether to enable zoom on the image

Galerie

Bildergalerie mit Vor-/Zurück-Navigation, Zähler und Tastaturunterstützung

_lightbox.html.erb

███ ███████ █████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████ ██
██
  ███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██

████ ██████████████████████████
     ███████████████████████████████ ███████████ ███
     █████████████████████████████ ████ ███
     ██████████ ███████████████ ████

Get Access to View Code

lightbox_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
  ██████ ██████ █ █
    ███████ ██████
    ████████ █ █████ ███████ ████████ █ ██
    █████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

lightbox_gallery_component.html.erb

████ ██████████████████████████
     ███████████████████████████████ ███████████ ███
     █████████████████████████████ ████ ███
     ██████████ █████████████████ ████

  ███ █████████ ████ ██
  ████ ██████████ ████████████ ████
    ██ ██████████████████████ ██ ███████ ██████ ██
      ███████ █████████████
              ██████████████████████████████████

Get Access to View Code

lightbox_gallery_component.rb

█ ██████████████████████ ████

█████ ████████████████████████ █ ███████████████████
  ███████████ ████████ ██████████████ ██████████████ █████

  ███ ███████████████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████
    ███████ █ ██████
    █████████████ █ ████████████
    █████████████ █ ████████████
    █████ █ ████

Get Access to View Code

lightbox_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
  ██████ ██████ █ █
    ███████ ██████
    ████████ █ █████ ███████ ████████ █ ██
    █████ █ █████ ████████ ████████ █████ █
  █

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`images` *	Array	erforderlich	Array of image hashes with :src, :alt, and optional :caption
`show_caption`	Boolean	`true`	Whether to display the image caption in the overlay
`show_counter`	Boolean	`true`	Whether to show the image counter (e.g. 1/5)
`zoom`	Boolean	`false`	Whether to enable zoom on the image

Name	Typ	Standard	Beschreibung
`images` *	Array	erforderlich	Array of image hashes with :src, :alt, and optional :caption
`show_caption`	Boolean	`true`	Whether to display the image caption in the overlay
`show_counter`	Boolean	`true`	Whether to show the image counter (e.g. 1/5)
`zoom`	Boolean	`false`	Whether to enable zoom on the image

Änderungsprotokoll v1.0.0

- 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

Lightbox

Einzelbild

Optionen

Galerie

Optionen

Änderungsprotokoll v1.0.0

Vollzugang erhalten