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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
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

StripJS: Die etwas andere Lightbox-Gallery
StripJS: Die etwas andere Lightbox-Gallery

StripJS ist eine responsive Lightbox-Galerie die nur einen Teil der Website verdeckt. Neben Bildern lassen sich damit auch Videos einbinden. » weiterlesen

Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

Kennst Du schon unser t3n Magazin?

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