Bildergalerie: Viele Bilder, null JavaScript
Eine Galerie klingt nach Plugin, ist aber mit heutigem CSS ein Nachmittagsprojekt ohne eine Zeile Skript: Bilder rein, Grid drüber, fertig. Das Projekt kombiniert fast alles aus den bisherigen Teilen.
Schritt 1: Bilder vorbereiten
Gleiche Seitenverhältnisse machen Galerien ruhig. Schneide deine Bilder auf ein einheitliches Format zu (etwa 4:3) und verkleinere sie auf Galeriegröße, so wie im Teil Bilder einbinden geübt. Zwölf Bilder mal 150 KB sind fast zwei Megabyte, da lohnt jede eingesparte Datei-Größße.
Schritt 2: Die Struktur
HTML-Code
<div class="galerie">
<figure>
<img src="bilder/messe-01.jpg" alt="Stand mit Heimcomputern"
width="400" height="300" loading="lazy">
<figcaption>Retro-Messe, Halle 2</figcaption>
</figure>
<figure>
<img src="bilder/messe-02.jpg" alt="Reihe alter Röhrenmonitore"
width="400" height="300" loading="lazy">
<figcaption>Monitore soweit das Auge reicht</figcaption>
</figure>
<!-- beliebig viele weitere figure-Blöcke -->
</div>Jedes Bild wohnt mit seiner Unterschrift in einem figure, alle zusammen in einem Container. loading="lazy" ist bei Galerien Pflichtprogramm: Geladen wird erst was in Sichtweite scrolltt.
Schritt 3: Das Grid
CSS
.galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.galerie figure {
margin: 0;
}
.galerie img {
width: 100%;
height: auto;
display: block;
border: 1px solid #808080;
}
.galerie figcaption {
font-size: 0.85em;
color: #555;
padding-top: 4px;
}Die Magie steckt in der zweiten Zeile, dem Selbstläufer-Raster von der Grid-Seite: so viele Spalten wie bei mindestens 220 Pixeln passen, auf dem Handy automatisch eine. Keine einzige Media Query nötig. Das margin: 0 am figure entfernt dessen Browser-Standardabstand, der in Rastern nur störrt.
Schritt 4: Klickbare Großansicht (die einfache Art)
<a href="bilder/gross/messe-01.jpg">
<img src="bilder/messe-01.jpg" alt="Stand mit Heimcomputern"
width="400" height="300" loading="lazy">
</a>Das Vorschaubild in einen Link auf die große Version wickeln: unspektakulär, robust, funktioniert überall und seit 1995. Schicke Overlay-Lightboxen kann man später immer noch nachrüsten, als Grundlage ist der Link ehrliches Handwerk.