Webdesign-Basics: Eine Bildergalerie für die Homepage erstellen

Die visuelle Gestaltung ist oft wesentlich für den Erfolg eines Web-Angebots – das gilt für Blogs ebenso wie für Onlineshops. Denn auch wenn man mit dem Ausspruch „Content is King“ immer wieder die Bedeutung guter Inhalte betont, darf man den optischen Aspekt nicht außer Acht lassen. Reine Textwüsten schrecken den Betrachter oft ab, noch bevor er überhaupt die Inhalte gelesen hat. Grafiken und Bilder sind deshalb für jede Website ein wichtiger Bestandteil: um den Inhalt zu illustrieren oder zu verdeutlichen, um eine persönliche und emotionale Ebene zu schaffen oder um die Vorzüge der angebotenen Produkte zu veranschaulichen.

Galerien sind ein beliebtes Mittel, um gleich mehrere Bilder übersichtlich in seine Website zu integrieren. Zur Einbettung solcher Bilderreihen gibt es verschiedene Möglichkeiten: Nutzer können z. B. eine simple Lightbox über den Quellcode in ihre Website einbinden und die Bildergalerie via HTML umsetzen. Noch einfacher geht es, wenn man eines der verbreiteten Content-Management-Systeme nutzt. Bei Systemen wie TYPO3 oder WordPress muss man lediglich die passende Erweiterung finden und ins Grundgerüst integrieren.

Domain kaufen
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach

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. 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 Plug-ins zu JavaScript-Bibliotheken oder Erweiterungen für Content-Management-Systeme.

Homepage-Baukasten
Die Website-Sensation mit Künstlicher Intelligenz
  • Intuitives Baukastensystem mit KI-Unterstützung
  • Bilder und Texte wie von Profis gemacht, direkt SEO-optimiert
  • Domain, SSL und E-Mail-Postfach inklusive

1. Lightbox-Download

Das bekannteste Lightbox-Skript steht auf der Website von Lokesh Dhakar zum kostenlosen Download zu Verfügung. Nach Entpacken der .zip-Datei lassen sich folgende Elemente finden: Die index.html-Datei (Anleitung auf Englisch) und 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. Außerdem muss man folgende Zeile in den Head der betreffenden Webseite übernehmen: 

<link href="ihr-css-verzeichnis/lightbox.css" rel="stylesheet">

Und folgende Zeile muss man in die letzte Zeile vor dem abschließendem </body>-Tag einfügen 

<script src="ihr-js-verzeichnis/lightbox.js"></script>

Achtung: 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 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 einzelnes Bild: 
<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>

Die Lightbox ist nun in die Website eingebunden. Natürlich gibt es noch zusätzliche Möglichkeiten, die Diashow bzw. Lightbox-Anzeige zu individualisieren. Indem man nach dem Laden des Scripts die „option-Methode“ aufruft und dort die jeweiligen Werte eingibt, passt man es an.

Beispiel: 
<script src="ihr-js-verzeichnis/lightbox.js"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    });
</script>
Die wichtigsten Optionen im Überblick:
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. Eine Auswahl finden Sie hier.

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 benutzerfreundliche 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 Plug-ins 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. Doch wird es weiterhin auch für diverse Blog-Projekte verwendet. Gerade im Bereich Fashion, Lifestyle oder Beauty ist eine ästhetische grafische Darbietung der Themen von hoher Bedeutung: Kein Wunder also, dass bei über 18.000 Erweiterungen auch das ein oder andere Plug-in für Bildergalerien dabei ist.

NextGen Gallery

NextGen Gallery ist eines der bekanntesten Plug-ins 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 Plug-in 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-Plug-in-Sammlung steht die kostenlose Version von NextGen Gallery zum Download zur Verfügung. Auf der Website der Entwickler findet man außerdem die kostenpflichtigen Plus- und Pro-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

Das Plug-in Envira Gallery (Lite) ermöglicht ebenfalls, Bildergalerien für seine Website zu erstellen. Individuelle Galerien erstellt der Nutzer 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-Plug-in bietet Envira dadurch auch aus SEO-Sicht Vorteile, denn die Ladegeschwindigkeit ist ein wichtiger Rankingfaktor.

Die kostenlose Version Envira Gallery Lite steht im WordPress-Plug-in-Verzeichnis zum Download zur Verfügung. Erweiterte Pakete sind kostenpflichtig, bieten aber z. B. zusätzliche Sharing- und Social-Media-Optionen sowie weitere SEO-Features und E-Commerce-Funktionen. Mehr dazu lesen Sie auf der Website von Envira Gallery.

Polaroid Gallery

Das letzte WordPress-Plug-in für die Implementierung einer Bildergalerie, das wir vorstellen wollen, ist die Polaroid Gallery. Wie der Name schon verrät, erwarten Nutzer hier Bildergalerien in Polaroid-Optik mit dem charakteristisch weißen Rand – perfekt also für Design- und Retro-Liebhaber, die ohne großen Aufwand eine Bildergalerie im klassischen Design suchen. Polaroid Gallery arbeitet auf Basis von CSS3 und jQuery und basiert auf einem Templating-System, über das Nutzer problemlos eigene Layouts kreieren können. Das Plug-in greift direkt auf die WP-Media-Library zu – so sind auch bereits hochgeladene Bilder problemlos integrierbar. Polaroid ist eine schnelle und einfache Galerie-Lösung, die alle wichtigen Grundfunktionen und ein klassisches Design bietet – Individualisierung jederzeit möglich. Das kostenlose Plug-in finden Sie in der Plug-in-Directory von WordPress.

Bildergalerien für Joomla!

Auch Joomla! erfreut sich in Deutschland und international immer größerer Beliebtheit. Mittlerweile es zu den Top 3 der meistgenutzten Content-Management-Systeme. Auch bei Joomla! erwarten den Nutzer eine riesige Community sowie ein großer Pool an Erweiterungen und Plug-ins.

sigplus

Die Simple Image Gallery Plus – kurz sigplus – hält im Grunde, was der Name bereits verspricht, und unterstützt den Nutzer bei der Erstellung von einfachen Bildergalerien. Das schlanke Plug-in 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 Nutzer profitieren von der einfachen Handhabung und intuitiven Bedienung. Im „Advanced-Modus“ stehen erfahrenen Nutzern auch weitere Einstellungen zu Thumbnails, Caching u.v.m. zur Verfügung. Das Plug-in ist kostenlos und steht in der 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ä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 Entwickler stehen eine ausführliche Dokumentation und zusätzliche Module und Plug-ins für Phoca Gallery zur Verfügung.

SIGE - Simple Image Gallery Extended

Eine weitere Möglichkeit, Bildergalerien via Joomla! zu integrieren, bietet das Plug-in SIGE (Simple Image Gallery Extended). Dies Galerie-Plug-in wird von einer großen Community beständig weiterentwickelt und verbessert. Es verfügt unter anderem über einen sogenannten Turbomodus, der das Hochladen auch großer Bilder und Bildergalerien ohne lange Ladezeiten und negativen Einfluss auf die Performance ermöglicht. Zusätzliche Features wie z. B. ein Parameteraufruf, Wasserzeichenfunktion, Listenansicht und intelligente Sortierung auf Server bilden nur einen kleinen Ausschnitt aus einer schier endlosen Liste an Erweiterungen, wie man hier einsehen kann. Der kostenlose Download ist über die Joomla!-Website möglich.

Bildergalerien für TYPO3

Um die Top 3 der bekanntesten und meistgenutzten Content-Management-Systeme zu vervollständigen, fehlt noch ein Programm: TYPO3. 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 – kaum ein anderes CMS überzeugt so sehr wie TYPO3 in den Bereichen Aktualität und kontinuierlicher Weiterentwicklung. 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 vorhandenen Vorzüge des CMS voll nutzen zu können. Auch in Sachen Bildergalerien gibt es für TYPO3 einige professionelle Lösungen.

Yet Another Gallery

Die Extension Yet Another Gallery – kurz YAG – gehört zu den beliebtesten Extensions für die Umsetzung von Bildergalerien in TYPO3. Der große Vorteil: Die Extension wird kontinuierlich weiterentwickelt und bietet somit aktuelle Standards. YAG eignet sich sowohl für kleine, private, als auch große, professionelle Projekte, denn die Extension ermöglicht durch seine Konfigurationsmöglichkeiten große Flexibilität. Ganz wie das CMS an sich, sind auch die Bildergalerien individuell erweiterbar und passgenau für jedes Projekt umsetzbar. Nutzer bestimmen so ihr eigenes Design oder wählen aus einer großen Anzahl bereits vorgefertigter Themes, die über das Extension Repository zur Verfügung stehen. Ausführliche Anleitungen zur Installation und Umsetzung erster Galerien inkl. Video-Tutorials finden Sie hier. Zum kostenlosen Download gelangt man über die TYPO3-Website.

Perfect Lightbox

Perfect Lightbox ist im klassischen Sinne keine Erweiterung zum Erstellen von Bildergalerien. Die Extension ermöglicht jedoch, Inhaltselemente einer Seite in einer Lightbox anzuzeigen, statt sie wie üblich über ein separates Pop-up-Fenster zu öffnen. Das Besondere: Mit Perfect Lightbox kann man nicht nur einzelne Elemente anzeigen lassen, sondern wahlweise auch alle Elemente einer Seite in einer gemeinsamen Galerie-Ansicht darstellen. Zusätzliche Features sind eine Diashow, ein variabler Präsentationsmodus und die Download-Option für Besucher. Nutzer können das Aussehen der Lightbox flexibel selbst gestalten. Downloaden lässt sich Perfect Lightbox hier.

War dieser Artikel hilfreich?