Gallery

Responsive Bildergalerie mit optionaler Lightbox, Keyboard-Navigation und Bildunterschriften. Die Lightbox öffnet das angeklickte Bild gross und erlaubt es, mit Pfeiltasten oder Wischgesten durch die gesamte Galerie zu blaettern. Auf Wunsch komplett ohne Lightbox als reines Grid.

Standard (3 Spalten, mit Lightbox)

Das typische Einsatzszenario: Bildergalerie auf einer Unternehmens- oder Projektseite. Ein Klick auf ein Bild öffnet die Lightbox; dort kann per Pfeiltaste oder Klick weitergegangen werden. Bilder können eine optionale Bildunterschrift erhalten.

Impressionen vom Solarfeld Nord

Luftaufnahme – Solarfeld Nord

Montagearbeiten im Frühling 2025

Fertigstellung Oktober 2025

Eröffnungsfeier 12. November 2025

<Gallery
  images={[
    { src: '/images/solarfeld-01.jpg', alt: 'Luftaufnahme des Solarfeldes', caption: 'Luftaufnahme – Solarfeld Nord' },
    { src: '/images/solarfeld-02.jpg', alt: 'Montage der Solarmodule', caption: 'Montagearbeiten im Frühling 2025' },
    { src: '/images/solarfeld-03.jpg', alt: 'Techniker bei der Inbetriebnahme' },
    { src: '/images/solarfeld-04.jpg', alt: 'Panorama des gesamten Areals', caption: 'Fertigstellung Oktober 2025' },
    { src: '/images/solarfeld-05.jpg', alt: 'Detailaufnahme Solarmodul' },
    { src: '/images/solarfeld-06.jpg', alt: 'Einweihung mit Bürgermeisterin', caption: 'Eröffnungsfeier 12. November 2025' },
  ]}
/>

4 Spalten, quadratisches Format

Quadratische Bilder eignen sich für Portrait-Galerien, Produkt-Thumbnails oder Social-Media-Importe. Mit cols=4 und aspectRatio="1/1" erhält jedes Bild exakt dasselbe Format.

Team-Portraits

<Gallery
  cols={4}
  aspectRatio="1/1"
  images={[
    { src: '/images/team-anna.jpg', alt: 'Anna Berger, Kundenberaterin' },
    { src: '/images/team-markus.jpg', alt: 'Markus Sauer, Netzplaner' },
    { src: '/images/team-lisa.jpg', alt: 'Lisa Funk, Projektleiterin' },
    { src: '/images/team-joerg.jpg', alt: 'Joerg Werner, Technischer Leiter' },
  ]}
/>

Ohne Lightbox

Mit lightbox= werden die Bilder als reines Grid dargestellt – kein Dialog, keine Interaktion. Sinnvoll, wenn Bilder nur dekorativ sind oder ein eigenes Lightbox-System eingebunden wird.

Dekoratives Bildgrid

<Gallery
  cols={2}
  lightbox={false}
  images={[
    { src: '/images/servicebus.jpg', alt: 'Stadtwerke Servicebus im Einsatz' },
    { src: '/images/energieberatung.jpg', alt: 'Energieberatung im Kundenzentrum' },
  ]}
/>

Installation

cp-components add gallery