Kategorien
Design HTML/CSS

Least.js: Responsive Bildergalerie auf Basis von HTML5, CSS3 und jQuery

Normalerweise stelle ich keine Galerie-Scripts vor. Gefühlt Tausende existieren in den nicht so fernen Weiten des Netzes und fast wöchentlich kommen neue hinzu. Das jQuery-Plugin von Kamil Czujowski und Sergej Müller jedoch sticht aus der Masse hervor. Es basiert auf aktuellen Standards und eignet sich außerordentlich gut für den Einsatz quer über alle Geräteklassen.

least-startseite

Least.js: Einfach zu implementierende Bildergalerie mit LazyLoad

Eine Bildergalerie mit Least.js entsteht stets auf der Basis einer Liste. Die einzelnen Bilder sind Listen-Elemente, die wiederum Listen-Elemente für die Beschriftung innerhalb des Hover-Overlays enthalten.

least-nur-thumbnails
Least.js: Übersicht der Thumbnails

Wie auch bei anderen Galerien üblich, werden initial Thumbnails in der Übersicht angezeigt. Per Klick auf das Thumbnail ruft man die eigentliche Bilddatei auf. Innerhalb des Listen-Elements zum Bild sorgt zunächst ein Gif dafür, dass sich ein weißer Schatten beim Hovern über das Bild legt. Dabei werden auch die in weiteren Listen-Elementen abgelegten Overlay-Texte angezeigt. Das eigentliche Thumbnail steuert man über ein HTML5-Data-Attribut namens data-original ein. Die verschiedenen Zustände sind innerhalb des übergeordneten Listen-Elements in separaten Div geordnet.

Zur Verdeutlichung des Gesagten; so sieht das beispielsweise für ein einzelnes Bild aus:

Der Funktionsaufruf des Galerie-Scriptes erfolgt über die ID der Galerie folgendermaßen:

$(document).ready(function(){
    $('#gallery').least();
});

Klickt man nun eines der angezeigten Vorschaubilder an, so wird das größere Original oberhalb der Thunbnail-Liste in das erste Listen-Element mit der ID fullPreview geladen.

least-mit-original-oben
Least.js: Anzeige des Originals nach Klick oberhalb der Thumbnails

Über das jQuery-Plugin LazyLoad sorgen die Entwickler dafür, dass die größeren Originale erst vom Server geholt werden, wenn sie auch tatsächlich geklickt wurden. Das ist insbesondere bei größeren Galerien sinnvoll, da ohne LazyLoad beim ersten Aufruf alle Thumbnails nebst aller Originale vorgeladen werden müssten, was sich in langsamem Bildaufbau und gefühlt langen Wartezeiten bemerkbar machen würde.

Die Kehrseite des Einsatzes von LazyLoad ist natürlich, dass nach dem Klick auf ein Thumbnail zunächst eine oder mehrere Gedenksekunden vergehen, bevor oberhalb der Vorschaugalerie tatsächlich das Originalbild sichtbar wird. Der Effekt lässt sich natürlich minimieren, indem man seine Bilder maximal in 720p oder 1080p hinterlegt und mit Photoshop oder meinem Lieblings-Kompressor JpegMini ordentlich vorbehandelt. Auf der Demoseite zu Least.js haben sich Czujowski und Müller auf eine maximale Auflösung von 960 x 600 Pixeln für das größere Originalbild festgelegt.

So funktionieren Bildergalerien mit Least.js vollständig responsiv, fließend bei Änderungen des Viewports. Skalieren Sie auf der Demoseite schlicht mal Ihr Browserfenster. Es dürfte LazyLoad zu verdanken sein, dass die Skalierung in derart hoher Geschwindigkeit und völlig ohne Ruckler und Wartezeiten erfolgt. Während das Originalbild ab einer Viewportbreite von 960 Pixeln zentriert, fließt die Thumbnailgalerien weiter über die volle Seitenbreite. Verkleinert man den Viewport, skaliert auch das Originalbild frei mit, bis zur vordefinierten Breite eines einzelnen Thumbnails.

Wer sehr kleine Galerien verfügbar machen will oder LazyLoad schlicht nicht mag, kann es via Parameter im Funktionsaufruf auch deaktivieren. Weitere Parameter sorgen etwa dafür, dass die Galerie nicht nach dem Zufallsprinzip, sondern streng numerisch nach vergebenen Dateinamen sortiert wird.

Least.js eignet sich ganz hervorragend dafür, Bildergalerien in moderner Optik auch auf mobilen Clients verfügbar zu machen, ohne dabei deren Look auf Desktop-Geräten zu beeinträchtigen. Least.js steht auf Github zum kostenfreien Download zur Verfügung. Vor der Nutzung in kommerziellen Projekten empfiehlt es sich Kontakt zu den Entwicklern aufzunehmen. Eine Lizenz, die Aufschluss über die erlaubte Nutzung geben würde, ist dem Script nicht beigegeben.

Links zum Beitrag