Vorheriger Artikel Nächster Artikel

Photobox: Schicke Bilder-Galerie mit jQuery

Photobox ist eine auf basierende Online-Galerie, mit schicken Hardware-beschleunigten Übergängen und anderen interessanten Features. Wir zeigen euch, was das Skript kann, und wo noch nachgebessert werden muss.

Photobox: Schicke Bilder-Galerie mit jQuery

Photobox ist ein insgesamt 14kb leichtes Online-Gallery-Skript auf Basis von jQuery, das mit einem modalen Fenster und beeindruckenden CSS3-Übergängen ausgestattet ist. Das Ziel bei der Entwicklung des Scriptes war, das Rendering, das bei vielen Scripten zulasten der CPU ging, auf die GPU auszulagern. Das Resultat ist ein tolles Gallery-Skript, das sich bestens für die Präsentation von Fotos eignet.

Photobox Basics

Photobox bietet dank Hardware-Beschleunigung des Browsers fließende und beeindruckende Übergänge zwischen den Fotos und funktioniert in allen aktuellen Browsern (Getestet in: Chrome, Safari und Firefox) und sogar im Internet Explorer (9+). Auch auf mobile Geräte bietet Photobox eine sehr flüssige Performance. Während das iPhone 4 etwas Schwierigkeiten mit den (nicht abschaltbaren) Übergängen hatte, bot das iPad 2 eine mit dem Desktop vergleichbare Performance. Neuere Geräte sollten in dieser Hinsicht also in Nichts nachstehen.

Das Einbinden von Videos und Flash- oder Silverlight-Filmen ist nicht möglich. Das dürfte wohl daran liegen, dass sich solche Elemente  beim nachträglichen Manipulieren via CSS als problematisch erweisen.

Photobox auf einem Desktop Browser
Photobox Screenshot

Neben den Übergängen bietet Photobox zusätzlich eine sehr ansehnliche Zoom-Funktion, die einen stufenlosen Zoom ins oder aus dem Bild ermöglicht. Bei mobilen Geräten muss jedoch auf die Zoom-Funktionalität verzichtet werden.

Die Steuerung kann über die Thumbnail-Leiste mit der Maus oder durch die Pfeiltasten erfolgen. Alternativ können beim Initiieren des Skripts die Tasten, mit denen das Steuern der Galerie ermöglicht wird, definiert werden.

User von mobilen Endgeräten mit Touchscreen müssen auf das Sliden durch die Thumbnails verzichten. Die Nutzbarkeit auf Tabletts wird dadurch aber nur mäßig eingeschränkt. Ein speziell für angepasstes Stylesheet wäre jedoch sehr wünschenswert, da in der derzeitigen Skriptfassung die Thumbnails teilweise größer sind als die eigentlichen Fotos. Auch das Sliden durch die Thumbnails, wäre ein Feature, das durchaus noch ergänzt werden sollte.

Photobox auf dem iPhone

Photobox Nutzung

Für den Einsatz, erwartet das Skript eine strikte Codestruktur.

<div id="gallery">
<a href="image1_large.jpg">
<img src="image1_small.jpg" alt="photo1 title">
</a>
<a href="image2_large.jpg">
<img src="image2_small.jpg" alt="photo1 title">
</a>
</div>

<script type="text/javascript">
$('#gallery a').photobox();
</script>

Alle, die übersichtlichen Quellcode mögen, werden enttäuscht sein. Denn Zeilenumbrüche oder das Fehlen eines Thumbnails verkraftet Photobox nicht. Somit ist der Einsatz des Skripts lediglich auf Galerien mit Thumbnailauswahl beschränkt. Behält man den strikten Code bei, können, wie von jQuery gewohnt, alle Links mit dem Aufruf für Photobox versehen werden.

Photobox schon jetzt einen Versuch wert

Trotz eingier Einschränkungen bietet Photobox eine sehr beeindruckende und einfach zu bedienende Gallery, die auf jeden Fall einen Versuch wert ist. Anfängern könnte das Skript einige Schwierigkeiten bereiten. Mit ein wenig Einlesen und der ein oder anderen hausgemachten Anpassung, dürfte Photobox aber in viele Einsatz-Szenarien reinpassen. Die aktuelle Fassung des Skripts findet ihr auf der Projektseite von Photobox.

Newsletter Newsletter

Abonniere unseren Newsletter und erhalte einen exklusiven Artikel aus dem aktuellen t3n Magazin.

Jetzt lesen: t3n Newsletter Nr. 545

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Mat am 08.01.2013 (11:48 Uhr)

    Sieht super aus.
    Lediglich die Möglichkeit wieder in die Übersicht zu gelangen kann leicht übersehen werden. Aber sonst einwandfrei!!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js
Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js

Performance von Bibliotheken ist alles. Sie beeinflusst nicht nur direkt das Anwendererlebnis, sondern auch, wie der Entwickler mit der Bibliothek arbeiten kann. jQuery ist wohl die beliebteste … » weiterlesen

Hardware-Prototyping auf Speed: Voltera erobert Kickstarter
Hardware-Prototyping auf Speed: Voltera erobert Kickstarter

Mit dem Voltera V-One druckt ihr euch innerhalb kurzer Zeit eigene Leiterplatten aus. So soll der Prozess des Hardware-Prototypings deutlich beschleunigt werden. » weiterlesen

Hardware-Fundstücke: Coden lernen mit Roboter-Spielzeug, Drohnen-Konkurrenz für DJI und mehr
Hardware-Fundstücke: Coden lernen mit Roboter-Spielzeug, Drohnen-Konkurrenz für DJI und mehr

Leser unseres Printmagazins kennen sie: die Hardware-Fundstücke. Auch für die aktuelle Jubiläumsausgabe des t3n Magazins findet ihr in diesem Artikel coole Gadgets und Geräte, über die wir … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?

t3n 40 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen