Entwicklung & Design

Photobox: Schicke Bilder-Galerie mit jQuery

Photobox ist eine auf jQuery 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 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 Smartphones 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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Mat

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung