Web Component
GH Gallery
Schlanke, performante Bild- & Video-Galerie als Web Component, gebaut mit Lit. Responsive Grid oder CSS-Masonry, Lightbox mit Tastatur und Touch, Slideshow – unter 30 KB gzip und funktioniert dank Progressive Enhancement auch ohne JavaScript.
Service
Entwicklung
Technologien
Lit, TypeScript, Web Components
Release
Juni 2026
GH Gallery ist eine wiederverwendbare Bild- und Video-Galerie als Web Component. Nachfolger der alten Preact/Material-Galerie (~74 KB) – diese Version zielt auf ≤ 30 KB gzip, lädt lazy und arbeitet progressiv: Die Bilder erscheinen auch dann, wenn JavaScript deaktiviert ist.
Highlights
Was GH Gallery kann
Grid oder Masonry
Responsives Grid oder CSS-Masonry-Layout – themebar über CSS Custom Properties.
Lightbox
Tastatur (←/→, Esc, Space, F), Touch-Swipe und Swipe-to-dismiss; native
Slideshow & Video
Autoplay mit Fortschrittsbalken und echtem
≤ 30 KB gzip
Ein selbst-enthaltenes IIFE-Bundle, Styles inline im Shadow DOM – kein externer Ballast.
Progressive Enhancement
Die Host-Seite liefert echte ; die Component reichert sie nur an.
Ein Custom Element, überall einsetzbar
Eingebunden wird ein einzelnes Skript, das die Bilder als Kinder eines <gh-gallery>-Elements anreichert. Weil die Host-Seite echte <img>-Elemente ausliefert, ist die Galerie SEO-freundlich und funktioniert ohne JS; mit JS kommen Lightbox, Slideshow und Fullscreen dazu.
Die Lightbox nutzt ein natives <dialog> in der Top-Layer – kein Stacking-Kontext-Ärger, kostenloser Focus-Trap.