Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 29. Juli 2013

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

Kein Beitragsbild

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.

Anzeige

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

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

7 Kommentare

  1. Hallo
    Kurze Frage:
    Statt des
    „Klickt man nun eines der angezeigten Vorschaubilder an, so wird das größere Original oberhalb der Thunbnail-Liste…geladen.“
    würde ich gerne die Gallerie etwas reduzieren:
    Nach dem Klick auf eines der Vorschaubilder soll ein bestimmter link aufgerufen werden. Das:“…so wird das größere Original oberhalb der Thumbnail-Liste…geladen…“ könnte entfallen.
    Oder in anderen Worten:
    (image)
    ändern in z.B.
    (link).
    Ist dies möglich?
    Und wie?
    Danke

  2. Eine wirklich tolle Bildergalerie, nur schade, dass diese nicht einmal im Internet Explorer 8, welcher noch von sehr vielen genutzt wird, funktioniert.

  3. Für mobile leider nicht wirklich geeignet, da auch das „Vollbild“ mit dem Viewport skaliert und keine Zoommöglichkeit vorhanden ist.

    Wenn die Galerie 1080p Bilder beinhaltet, diese aber auf Smartphone-Größe skaliert werden ist das nicht besonders sinnvoll

    • Verstehe den Einwand nicht. Pinch-Zoom erlaubt es dir doch das Vollbild beliebig zu vergrößern, da es eben in Vollauflösung geladen, aber nur initial auf den Viewport skaliert wird.

      • Pinch-Zoom funktioniert aber nicht – sonst wäre das ja kein Problem :)
        Auf der Demo-Seite und allen mobile-optimierten Seiten mit viewport width=device-width kann man im Chrome auf Android und im Default Browser nicht dichter als 100% zoomen. Im Firefox gehts.

        Ein Zoom-Button im Plugin wäre definitiv die bessere Wahl.

      • Hmm. Kann sein, dass du Recht hast. Bei mir funktioniert Pinch-Zooming jedenfalls, wobei ich nicht sicher bin, ob ich an 100% herangekommen bin. Jedenfalls kam ich sehr tief ins Foto hinein. Insofern: Mir reicht es so ;-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.