Bildergalerie für die Homepage erstellen – So geht’s!
Die visuelle Gestaltung ist oft wesentlich für den Erfolg eines Web-Angebots und Grafiken sowie Bilder sind deshalb für jede Website ein wichtiger Bestandteil. Galerien sind ein beliebtes Mittel, um gleich mehrere Bilder übersichtlich in seine Website zu integrieren. Zur Einbettung solcher Bilderreihen gibt es verschiedene Möglichkeiten: Nutzerinnen und Nutzer können etwa eine simple Lightbox über den Quellcode in ihre Website einbinden oder CMS-Erweiterungen nutzen.
Einbindung einer Lightbox-Bildergalerie
Eine Lightbox gehört zu den einfachsten Möglichkeiten, Bilder auf einer Website zu präsentieren. Die Lightbox wird als dynamisches HTML in JavaScript programmiert. Klickt man auf die Vorschaubilder, öffnet sich das Bild im Großformat über der angedunkelten Website als Hintergrund. Solch eine Lightbox lässt sich unkompliziert in die eigene Website einbinden und mit weiteren Funktionen ergänzen, sodass sie sich ideal für moderne Webentwicklung eignet.
Als Voraussetzung benötigt man eine aktuelle Version von Lightbox und natürlich die Bilder inkl. Thumbnails (Vorschaubilder), die man auf seiner Seite einbinden möchte. Die erste Lightbox hat der Entwickler Lokesh Dhakar im Jahr 2005 programmiert und das Skript kurze Zeit später unter eine Creative-Commons-Lizenz gestellt. Mittlerweile gibt es zahlreiche Versionen und Ausführungen des beliebten Skripts. Dazu zählen sowohl eigenständige Skripte als auch Plugins zu JavaScript-Bibliotheken oder Erweiterungen für Content-Management-Systeme.
- Profi-Website in Sekunden dank KI
- Aus tausenden Vorlagen auswählen
- 30 Tage kostenlos testen
1. Lightbox-Download
Das bekannteste Lightbox-Skript steht auf der Website von Lokesh Dhakar zum kostenlosen Download zur Verfügung. Nach Entpacken der .zip-Datei lassen sich unter anderem folgende Elemente finden: Die index.html-Datei im Ordner examples, die ein Anwendungsbeispiel bereitstellt, und im Verzeichnis dist die drei Ordner css, images und js.
2. CSS- und JavaScript-Datei einbinden
Als nächstes kopiert man die Datei lightbox.css aus dem CSS-Ordner in das CSS-Verzeichnis der Website und die .js-Datei ins JavaScript-Verzeichnis. Sie finden beide dieser Dateien in den entsprechenden Ordnern im dist-Verzeichnis. Außerdem muss man folgende Zeile in den Head der betreffenden Webseite übernehmen, um das CSS-Stylesheet zu laden:
<link href="ihr-css-verzeichnis/lightbox.css" rel="stylesheet">Und folgende Zeile muss man in die letzte Zeile vor dem abschließenden </body>-Tag einfügen, um das erforderliche JavaScript einzubinden:
<script src="ihr-js-verzeichnis/lightbox.js"></script>Lightbox benötigt jQuery. Falls nicht bereits geschehen, muss man es vor der Arbeit mit dem Lightbox-Skript einbinden und laden.
3. Lightbox-Attribute für Bildergalerie in HTML einbinden
Jedes Bild, das man über die Lightbox anzeigen möchte, benötigt im Quellcode ein passendes HTML-Attribut, damit dem Skript die benötigten Informationen zur Verfügung stehen. Jeden Link zum Bild muss man mit dem Attribut data-lightbox und einem individuellen Namen für jede Galerie versehen. Bilder, die in eine gemeinsame Diashow sollen, benötigen alle das gleiche data-lightbox-Attribut. Möchte man zusätzlich eine Bildunterschrift integrieren, verwendet man das data-title-Attribut mit dem entsprechenden Text.
Beispiel: Einfügen eines einzelnen Bildes
<a href="images/bild-1.jpg" data-lightbox="bild-1" data-title="Bildunterschrift">
<img src="images/bild-1-vorschau.jpg" alt="alternative Erklärung">
</a>Beispiel: Diashow mit mehreren Bildern
<a href="images/bild-2.jpg" data-lightbox="show-1" data-title="morgens"><img src="images/bild-2-vorschau.jpg" alt="alternative Erklärung"></a>
<a href="images/bild-3.jpg" data-lightbox="show-1" data-title="mittags"><img src="images/bild-3-vorschau.jpg" alt="alternative Erklärung"></a>
<a href="images/bild-4.jpg" data-lightbox="show-1" data-title="abends"><img src="images/bild-4-vorschau.jpg" alt="alternative Erklärung"></a>4. Lightbox anpassen
Die Lightbox ist nun in die Website eingebunden. Natürlich gibt es noch zusätzliche Möglichkeiten, die Diashow bzw. Lightbox-Anzeige zu individualisieren. Eine Anpassung erfolgt, indem man nach dem Laden des Scripts die option-Methode aufruft und dort die jeweiligen Werte eingibt. Die Funktion sieht wie folgt aus:
<script src="ihr-js-verzeichnis/lightbox.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
});
</script>Die wichtigsten Optionen im Überblick
Es gibt verschiedene Attribute, mit denen man das Verhalten der Lightbox innerhalb der option-Funktion anpassen kann. Die wichtigsten finden Sie hier:
| Option | Standard | Beschreibung |
|---|---|---|
alwaysShowNavOnTouchDevices
|
false
|
Wechselt man in dieser Option auf true, sind die Navigationspfeile, die sonst nur erscheinen, wenn man mit der Maus drüberscrollt, auf Geräten mit Touch-Display permanent sichtbar.
|
disableScrolling
|
false
|
Wechselt man hier zu true, ist das Scrollen innerhalb der Seite nicht mehr möglich, wenn die Lightbox geöffnet ist.
|
fadeDuration
|
500
|
Hier bestimmt man, wie lange das Overlay zum Ein- bzw. Ausblenden braucht (Zeitangaben in Millisekunden). |
maxWidth
|
Hiermit legt man die maximale Bildbreite fest (Angabe in Pixeln). | |
maxHeight
|
Hiermit legt man die maximale Bildhöhe fest (Angabe in Pixeln). | |
positionFromTop
|
50
|
Hier legt man den Abstand zum oberen Rand des Sichtfensters fest (Angabe in Pixeln). |
resizeDuration
|
700
|
Über diese Angabe bestimmt man die Zeit, die der Container für den Übergang zwischen zwei unterschiedlich großen Bildern benötigt (Zeitangaben in Millisekunden). |
showImageNumberLabel
|
true
|
Wechselt man zu false, wird die Gesamtzahl der Bilder innerhalb der Slideshow nicht mehr angezeigt (z. B. Bild 3 von 33).
|
wrapAround
|
false
|
Setzt man die Option auf true, beginnt die Slideshow nach dem letzten Bild wieder am Anfang.
|
Alternativ gibt es noch eine Vielzahl weiterer Programme, mit Hilfe derer man eine individuelle Bildergalerie erstellen und in die eigene Website einfügen kann. Die Tools sind in der Regel sehr simpel und intuitiv zu bedienen, meist verfügen sie über einen Drag&Drop-Editor.
Bildergalerien direkt in HTML und CSS umsetzen
Bildergalerien lassen sich auch ohne JavaScript oder Lightbox direkt mit HTML und CSS umsetzen. Dabei werden die Bilder meist in einem flexiblen Raster (Grid oder Flexbox) angeordnet, das sich automatisch an verschiedene Bildschirmgrößen anpasst. Diese einfache Lösung eignet sich besonders für schnelle Ladezeiten, responsive Designs und Websites, die bewusst auf externe Skripte verzichten möchten.
Mit ein paar Zeilen CSS lässt sich so eine ansprechende, übersichtliche Galerie realisieren, die sowohl performant als auch suchmaschinenfreundlich ist. Ein Beispiel für eine einfache Bildergalerien könnte folgendermaßen aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Einfache Bildergalerie</title>
<style>
body {
margin: 0;
padding: 2rem;
background-color: #f9f9f9;
}
h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover {
transform: scale(1.03);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h2>Meine Bildergalerie</h2>
<div class="gallery">
<img src="images/bild-1.jpg" alt="Sonnenaufgang am Meer">
<img src="images/bild-2.jpg" alt="Blühende Wiese im Frühling">
<img src="images/bild-3.jpg" alt="Berglandschaft bei Sonnenuntergang">
<img src="images/bild-4.jpg" alt="Stadtansicht bei Nacht">
<img src="images/bild-5.jpg" alt="Herbstlicher Waldweg">
</div>
</body>
</html>Im HTML-Teil unseres Minimalbeispiels werden eine h2-Überschrift und ein div-Container definiert, in dem mehrere Bilder mit dem img-Tag eingefügt sind. Jedes Bild hat ein alt-Attribut, das eine kurze Beschreibung enthält. Dies ist wichtig für Barrierefreiheit und SEO. Im CSS-Teil sorgt die Grid-Darstellung (display: grid) dafür, dass die Bilder automatisch in Spalten angeordnet werden, die sich flexibel an die Bildschirmgröße anpassen. Mit gap: 10px entsteht etwas Abstand zwischen den Bildern. Durch die hover-Effekte (Vergrößerung und Schatten) wirkt die Galerie interaktiver und moderner, wenn man mit der Maus über ein Bild fährt.
Sie können die Galerie leicht erweitern, zum Beispiel durch Bildunterschriften unter den Fotos, einheitliche Rahmen oder den Einsatz von object-fit: cover, um Bildausschnitte gleichmäßig und harmonisch darzustellen. Ebenso lässt sich das Layout mit wenigen CSS-Anpassungen an Ihr Corporate Design anpassen. Auf diese Weise erhalten Sie auch ohne JavaScript eine optisch ansprechende, benutzerfreundliche und SEO-optimierte Bildergalerie, die sich flexibel in jede Website integrieren lässt.
Bildergalerien-Erweiterungen für Content-Management-Systeme
Bei der Umsetzung ihrer Website entscheiden sich viele Unternehmen wie auch Selbstständige für den Einsatz eines Content-Management-Systems. Das ist mit dem Vorteil verbunden, dass ein CMS bereits ein „fertiges Grundgerüst“ bietet – die meisten Systeme ermöglichen es zudem, auch ohne tiefergehende Programmier- und IT-Kenntnisse eine professionelle Website zu erstellen.
Neben der intuitiven Bedienung und den benutzerfreundlichen Oberflächen schätzen viele auch den flexiblen Aufbau von Systemen wie Joomla! oder Typo3. Durch die oft modulare Struktur lässt sich das Grundgerüst erweitern und auf die individuellen Bedürfnisse abstimmen. Möglich macht das unter anderem die große Community, die hinter vielen (Open-Source-)Systemen steckt und zahlreiche Extensions oder Plugins erstellt. Somit gibt es auch zahlreiche Erweiterungen, um professionelle Bildergalerie zu erstellen und einzubinden. Wir stellen Ihnen einige Lösungen für die Systeme Joomla!, WordPress und TYPO3 vor.
Bildergalerien für WordPress
WordPress ist das meistgenutzte Open-Source-CMS weltweit. Obwohl es ursprünglich als Blog-System konzipiert war, stellt WordPress mittlerweile durch viele Möglichkeiten zur Erweiterung und Anpassung ein vollwertiges Content-Management-System dar, das auch für andere Bereiche genutzt werden kann. Gerade im Bereich Fashion, Lifestyle oder Beauty ist eine ästhetische grafische Darbietung der Themen von hoher Bedeutung: Kein Wunder also, dass bei über 60.000 Erweiterungen auch das ein oder andere Plugin für Bildergalerien dabei ist.
NextGen Gallery
NextGen Gallery ist eines der bekanntesten Plugins für WordPress. Sowohl Thumbnail-Galerien als auch Slideshows sind mit NextGen möglich, zudem gibt auch eine integrierte Lightbox-Option – alles im responsiven Design. Das Plugin bietet auch für sehr große Galerien viele Optionen und erleichtert durch seine übersichtliche Struktur und einfache Bedienung sowohl den Upload großer Bildermengen als auch die Bildverwaltung. Die wichtigsten Parameter wie Größe, Anzahl oder Intervall sind wählbar, auch Wasserzeichen fügt man im Handumdrehen ein. Allgemein punktet NextGen mit Usability und einer übersichtlich strukturierten Benutzeroberfläche. Über die WordPress-Plugin-Sammlung steht die kostenlose Version von NextGen Gallery zum Download zur Verfügung. Auf der Website der Entwicklerinnen und Entwickler findet man außerdem die kostenpflichtigen Versionen, die mit zusätzlichen Features für den professionellen Einsatz aufwarten. Letztere bieten vor allem für den E-Commerce-Bereich einige interessante Funktionen.
Envira Gallery (Lite)
Das Plugin Envira Gallery ermöglicht ebenfalls, Bildergalerien für seine Website zu erstellen. Individuelle Galerien erstellt der User entweder für einzelne Posts oder Seiten, aber auch sogenannte globale Galerien sind möglich.
Das responsive Design ist bei Envira Out-of-the-Box und sowohl für Galerien als auch Lightboxen umgesetzt. Das Besondere an Envira: Das Programm lädt die Bildinhalte asynchron nach, weshalb man bezüglich Ladezeit und Performance selbst bei großen Bildergalerien keine Abstriche machen muss. Als Bildergalerie-Plugin bietet Envira dadurch auch aus SEO-Sicht Vorteile, denn die Ladegeschwindigkeit ist ein wichtiger Rankingfaktor.
Die kostenlose Version Envira Gallery Lite steht im WordPress-Plugin-Verzeichnis zum Download zur Verfügung. Erweiterte Pakete sind kostenpflichtig, bieten aber z. B. Watermarks oder Video-Galerien an. Mehr dazu lesen Sie auf der Website von Envira Gallery.
MetaSlider
Auch das WordPress-Plugin MetaSlider gehört mit zu den beliebtesten Lösungen, um Bilder und Slideshows auf einer Website zu präsentieren. Mit seiner intuitiven Drag&Drop-Oberfläche lassen sich Slider in wenigen Minuten erstellen, ohne dass Programmierkenntnisse erforderlich sind. Der User kann dabei aus mehreren Slider-Typen auswählen und so den Stil, die Animationen und Übergangseffekte individuell anpassen.
Ein wesentlicher Vorteil von MetaSlider ist das vollständig responsive Design. Alle Slider passen sich automatisch an die Bildschirmgröße an, wodurch Bilder und Texte sowohl auf Desktop-Rechnern als auch auf Smartphones oder Tablets optimal dargestellt werden. Zudem bietet das Plugin eine Reihe von SEO-Optionen. Darüber hinaus ist MetaSlider mit dem WordPress-Block-Editor (Gutenberg) sowie gängigen Page Buildern kompatibel und lässt sich nahtlos in bestehende Layouts integrieren. Die kostenlose Version von MetaSlider steht im offiziellen WordPress-Plugin-Verzeichnis zur Verfügung. Wer mehr Funktionen benötigt, kann auf die Pro-Version upgraden, die unter anderem Video-Slider und Thumbnail-Navigation bietet.
Bildergalerien für Joomla!
Auch Joomla! erfreut sich in Deutschland und international immer größerer Beliebtheit. Mittlerweile gehört es zu den Top 3 der meistgenutzten Content-Management-Systeme. Auch bei Joomla! erwarten den User eine riesige Community sowie ein großer Pool an Erweiterungen und Plugins.
sigplus
Die Simple Image Gallery Plus – kurz sigplus – hält im Grunde, was der Name bereits verspricht, und unterstützt den User bei der Erstellung von einfachen Bildergalerien. Das schlanke Plugin für Bildergalerien erfüllt seinen Zweck und eignet sich vor allem für kleine Homepages und Galerien mit einer überschaubaren Anzahl von Bildern. Unerfahrene Nutzerinnen und Nutzer profitieren von der einfachen Handhabung und intuitiven Bedienung. Im „Advanced-Modus“ stehen erfahrenen Nutzenden auch weitere Einstellungen zu Thumbnails, Caching u.v.m. zur Verfügung. Das Plugin ist kostenlos und steht im Joomla! Extensions Directory zum Download bereit.
Phoca Gallery
Ebenfalls kostenlos ist Phoca Gallery – dabei bietet das Programm einen deutlich größeren Funktionsumfang als das zuvor erwähnte sigplus. Es bietet die Möglichkeit, Bildergalerien und Slideshows in die eigene Joomla!-Website einzubinden. Die Bedienung von Phoca Gallery erfolgt allerdings nicht ganz so intuitiv – insbesondere Anfängerinnen und Anfänger benötigen etwas Einarbeitungszeit, um den vollen Funktionsumfang nutzen zu können. Hat man den Einstieg jedoch geschafft, stehen neben den Grundfunktionen auch praktische Features wie Wasserzeicheneinbindung oder eine Downloadoption für Besucher zur Verfügung. Die kostenlose Erweiterung findet man auf der Website von Joomla!, auf der Seite der Entwickelnden stehen eine ausführliche Dokumentation und zusätzliche Module und Plugins für Phoca Gallery zur Verfügung.
Showtime Image Gallery
Das kostenpflichtige Joomla!-Plugin Showtime Image Gallery ermöglicht die einfache Erstellung von professionellen Bildergalerien direkt innerhalb des Content-Management-Systems. User können Galerien für einzelne Beiträge oder Seiten anlegen und diese über Module oder Shortcodes einbinden. Mit der Unterstützung gängiger Lightbox-Skripte wie FancyBox, LightGallery oder PhotoSwipe lassen sich Bilder im Großformat ansprechend und interaktiv präsentieren. Dank des responsiven Designs passen sich alle Galerien automatisch an unterschiedliche Bildschirmgrößen an. Zusätzlich können Nutzerinnen und Nutzer SEO-relevante Attribute wie Bildtitel und Alt-Texte vergeben, um die Sichtbarkeit in Suchmaschinen zu verbessern. Das Plugin ist als Abomodell auf der Website des Entwicklerstudios Firecoders zum Download erhältlich.
Bildergalerien für TYPO3
Auch TYPO3 ist ein beliebtes Content-Management-System. Das CMS ist eine stark erweiterbare Software, die sowohl für kleine und mittelgroße Websites als auch für sehr große Enterprise-Lösungen zum Einsatz kommt. Entsprechend riesig ist die Community von TYPO3. Allerdings ist TYPO3 nicht die unkomplizierteste Lösung, möchte man ohne große Vorkenntnisse eine Website umsetzen. Trotzdem investieren viele Unternehmen die Zeit in Einarbeitung bzw. Kosten für Fachpersonal, um die Vorzüge des CMS voll nutzen zu können. Auch in Sachen Bildergalerien gibt es für TYPO3 einige professionelle Lösungen.
Simple Image Gallery (bm_image_gallery)
Die TYPO3-Erweiterung Simple Image Gallery bzw. bm_image_gallery ermöglicht die einfache Erstellung von flexiblen und responsiven Bildergalerien. Nutzerinnen und Nutzer können Galerien direkt aus TYPO3-File-Collections anlegen, sodass Bilder zentral verwaltet und in mehreren Galerien wiederverwendet werden können. Beim Klick auf ein Bild öffnet sich optional eine Lightbox, die das Bild im Großformat darstellt und eine intuitive Navigation durch die Galerie ermöglicht. Dank der Unterstützung von individuellen Bildgrößen und TypoScript-Konfigurationen lassen sich Darstellung und Layout der Galerien an die jeweiligen Anforderungen anpassen. Die Erweiterung ist zudem SEO-freundlich, da Alt-Texte, Titel und Beschreibungen für jedes Bild hinterlegt werden können. bm_image_gallery lässt sich in moderne TYPO3-Installationen integrieren und ist im Extensions-Store von TYPO3 zum Download erhältlich.
ns_gallery
Die TYPO3-Erweiterung ns_gallery ist eine kostenpflichtige Lösung für die Erstellung von professionellen Bildergalerien und Multimedia-Slidern. Sie unterstützt unterschiedliche Layouts, Slider-Darstellungen sowie Zoom-Funktionen, wodurch sich Galerien optisch flexibel an Ihr Webdesign anpassen lassen. ns_gallery erlaubt die Verwaltung von Bildern in Alben und Kategorien und unterstützt zusätzlich die Einbindung von Videos, beispielsweise von YouTube.
Mit Funktionen wie Lazy-Loading und responsivem Design werden sowohl Ladezeiten als auch die Darstellung auf mobilen Endgeräten optimiert. Die Erweiterung bietet außerdem umfangreiche Lightbox-Funktionen. Sie kann 15 Tage kostenlos getestet werden und ist danach als jährliches Abonnement oder als Lifetime-Subscription auf der offiziellen Website erhältlich.
SEO-relevante Aspekte von Bildergalerien
Bildergalerien für Homepages können die Sichtbarkeit Ihrer Website in Suchmaschinen deutlich verbessern, wenn sie richtig optimiert sind. Dazu gehört die Verwendung aussagekräftiger Dateinamen, Alt-Texte und Bildbeschreibungen, die den Inhalt der Bilder für Suchmaschinen verständlich machen. Auch responsive Darstellung, schnelle Ladezeiten durch Lazy Loading und optimierte Bildgrößen tragen zur Performance bei, was sich positiv auf das Ranking auswirkt.
SEO-Checkliste für Galerien
✓ Alle Bilder mit aussagekräftigen Dateinamen versehen
✓ Alt-Texte und Titel zur Bildbeschreibung ergänzen
✓ Bilder für schnelle Ladezeiten optimieren (Kompression, Lazy Loading)
✓ Responsive Größen für verschiedene Geräte einbinden
✓ Strukturierte Daten verwenden
✓ Wenn möglich, Bildunterschriften oder Captions hinzufügen
✓ Interne Verlinkung zu relevanten Inhalten nutzen