Zum Inhalt springen
UI Kit
Accent

Bildergalerien mit Lightbox

Bilder als Mauerwerk, mit Filter, im Karussell und in der Lightbox, dazu ein Vorher-nachher-Regler.

7 Variants
Kategorie wechseln

Mauerwerk, Filter oder Lightbox

Eine Galerie lässt die Arbeit sprechen, für Fotografen, Locations, Handwerk und Shops. Die sieben Layouts hier nehmen deine eigenen img- oder picture-Elemente, Laden, Größen und Alt-Texte bleiben also in deiner Hand, und setzen jedes Bild unverzerrt in seinen Rahmen.

Das Mauerwerk passt zu Fotos in gemischten Formaten. Das Raster mit Filter hilft bei Kategorien wie Küchen, Bäder und Gärten. Karussell und waagerechte Reihe zeigen eine Serie auf wenig Höhe. Lightbox öffnet jedes Bild groß, mit Pfeiltasten und Escape. „Großbild mit Vorschauen“ eignet sich für ein Produkt oder eine Immobilie, „Vorher und nachher“ vergleicht zwei Zustände mit einem Regler, der auch per Tastatur geht.

Wähle weniger, dafür bessere Bilder, zwölf starke sagen mehr als sechzig. Halte Licht und Ausschnitt in einer Serie gleich. Exportiere Bilder in der Größe, in der sie erscheinen, aiw media optimize schreibt dir AVIF und WebP in vier Breiten.

Details

Was Galerie mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
7
Version
1.0.0 · seit 1.0.0
Datei
components/ui/gallery.tsx
Bringt mit
utilskiticonsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 15 eigene Texte
Studio
Alle 7 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle GalleryProps aus components/ui/gallery.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    GalleryVariant

    masonryfiltercarousellightboxbefore-afterfeaturedhorizontal-scroll

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • itemsoptional
    GalleryItem[]
  • compareoptional
    GalleryCompare

    For before-after

Eingebaute Texte

Diese Texte schreibt Galerie selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 15 Texte anzeigen
allEnglisch AllDeutsch Alle
imagesEnglisch {n} imagesDeutsch {n} Bilder
imageEnglisch {n} imageDeutsch {n} Bild
previousEnglisch Previous imageDeutsch Vorheriges Bild
nextEnglisch Next imageDeutsch Nächstes Bild
closeEnglisch CloseDeutsch Schließen
openEnglisch Open {title}Deutsch {title} öffnen
showEnglisch Show {title}Deutsch {title} zeigen
beforeEnglisch BeforeDeutsch Vorher
afterEnglisch AfterDeutsch Nachher
compareEnglisch Drag to compare before and afterDeutsch Ziehen, um vorher und nachher zu vergleichen
compareValueEnglisch {n} percent beforeDeutsch {n} Prozent vorher
filterEnglisch Filter imagesDeutsch Bilder filtern
galleryEnglisch GalleryDeutsch Galerie
ofEnglisch ofDeutsch von

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Galerie reagiert selbst auf die Tasten Pfeil links, Pfeil rechts, Pos1, Ende und Leertaste.
  • Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
  • Setzt aria-current, aria-haspopup, aria-label, aria-live, aria-pressed, aria-roledescription und aria-valuetext, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen group und region.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 11 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Galerie?

Mit aiw add @ai-website/gallery. Der Befehl legt die Datei components/ui/gallery.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Galerie?

7 Varianten, Mauerwerk, Raster mit Filter, Karussell, Lightbox, Vorher und nachher, Großbild mit Vorschauen und Waagerechte Reihe. Du wählst sie mit der Prop variant, zum Beispiel variant="filter".

Kann ich die Texte von Galerie übersetzen?

Ja. Galerie bringt 15 eigene Texte auf Deutsch und Englisch mit, etwa „Alle“, „Vorheriges Bild“ und „Nächstes Bild“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Galerie einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Galerie mit aiw_components und installieren sie mit aiw_add @ai-website/gallery. Nenn im Prompt die Variante, etwa variant="masonry", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Galerie ohne Code anpassen?

Ja, im Studio. Alle 7 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Gallery-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Gallery stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert