Neue Bildergalerie Funktionalität
Diese Seite demonstriert die neue Bildergalerie-Funktionalität. Redakteure können jetzt einfach mehrere Bilder in einem Pinterest-ähnlichen Layout darstellen.
Verwendung der Galerie
Die Syntax für GitHub Pages:
<div class="image-gallery" data-gallery-id="gallery-8">
<div class="gallery-item" data-index="0">
<img src="/assets/images/ordner/bild1.jpg"
alt="Beschreibung 1"
data-caption="Beschreibung 1"
data-gallery="gallery-8"
loading="lazy"
class="gallery-thumbnail">
<div class="gallery-overlay"></div>
</div>
<div class="gallery-item" data-index="1">
<img src="/assets/images/ordner/bild2.jpg"
alt="Beschreibung 2"
data-caption="Beschreibung 2"
data-gallery="gallery-8"
loading="lazy"
class="gallery-thumbnail">
<div class="gallery-overlay"></div>
</div>
<div class="gallery-item" data-index="2">
<img src="/assets/images/ordner/bild3.jpg"
alt="Bild3"
data-caption="Bild3"
data-gallery="gallery-8"
loading="lazy"
class="gallery-thumbnail">
<div class="gallery-overlay"></div>
</div>
</div>
Beispiel-Galerie
Hier ist eine Beispiel-Galerie mit Team-Bildern:
Features der Galerie
- Pinterest-Style Layout: Automatisches Masonry-Grid für optimale Darstellung
- Responsive Design: Passt sich an alle Bildschirmgrößen an
- Lightbox Navigation: Pfeile und Tastatur-Navigation zwischen Bildern
- Touch-Gesten: Wischen auf Mobilgeräten
- Bildunterschriften: Optionale Beschreibungen pro Bild
- Performance: Lazy Loading und Preloading der nächsten Bilder
Einzelbilder
Normale Bilder funktionieren weiterhin wie gewohnt und öffnen sich einzeln in der Lightbox:
Die neue Galerie-Funktionalität erweitert die bestehende Lightbox um Multi-Bild-Navigation, ohne die Funktionalität für Einzelbilder zu beeinträchtigen.
Technische Details
- Jekyll Plugin: Automatische HTML-Generierung aus Markdown
- CSS Grid/Flexbox: Modernes, responsives Layout
- JavaScript Enhanced: Progressive Enhancement für alle Features
- Touch-optimiert: Swipe-Gesten und größere Touch-Targets
- Accessibility: Tastatur-Navigation und Screen-Reader Support
