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.

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

    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
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

Upverter: Das kann das GitHub für Hardware
Upverter: Das kann das GitHub für Hardware

Upverter überträgt das erfolgreiche Konzept hinter GitHub auf die Hardware-Entwicklung. Firmen und Hobby-Bastler können die Plattform nutzen, um im Team gemeinsam an Hardware-Projekten zu … » weiterlesen

Bootstrapping für Hardware-Startups: Dieser neue Guide hilft euch dabei
Bootstrapping für Hardware-Startups: Dieser neue Guide hilft euch dabei

„The Ultimate Guide To Bootstrapping A Hardware Startup“ führt Gründer im Hardware-Segment auf 22 Seiten von der Idee bis zum ausgelieferten Produkt. Das Dokument könnt ihr euch kostenlose … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen