Kategorien
JavaScript & jQuery Programmierung

HTML5: Threesixty.js generiert 360-Grad-Ansichten aus Bild-Strecken

360 Grad und es wird noch heißer. Nee, ich glaube, da verwechsele ich gerade was. Was das jQuery-Plugin Threesixty.js leistet, hat nur dann etwas mit Temperatur zu tun, wenn man entsprechendes Bildmaterial verwendet. Ansonsten leistet Threesixty.js schlicht die Erstellung von 360-Grad-Ansichten, wie man sie etwa typischerweise auf den Websites der internationalen Auto-Marken vorfindet. Der Charme des Plugins liegt in seiner einfachen Handhabung.

threesixtyjs-homepage

Threesixty.js: Data-Attribute und eine Bilderstrecke

Alles, was Threesixty.js benötigt, ist jQuery und der Pfad zu einer Bilderstrecke. Im folgenden Beispiel sind es 61 Bilder, die für die Darstellung des Vexel-Juwels heran gezogen werden. Die Bilder sind entsprechend von 0 bis 61 so benannt: gem0.jpg, gem1.jpg,…, gem61.jpg. Das Bild mit dem Nullwert wird als Startpunkt genommen.

Das Div-Element platziert man an die Stelle im HTML-Dokument, an der die 360-Grad-Ansicht erscheinen soll. Unter Verwendung der Data-Attribute path und count werden die für die Darstellung wichtigen Werte direkt im HTML-Quelltext an die JavaScript-Funktion übergeben.

An JavaScript wurde für das Vexel-Juwel folgender Code benötigt:

$(document).ready(function(){
    $('.threesixty').threeSixty({
        dragDirection: 'horizontal'
    });
});

Der Function-Call kann um verschiedene Parameter erweitert werden. Im Beispiel findet lediglich dragDirection Verwendung. Dieser Parameter gibt an, auf welcher Ebene sich das Objekt drehen soll. Im Standard, so auch im Beispiels, handelt es sich um die horizontale Ebene, vertikale Drehungen sind mit dem Wert vertical einzustellen. Sowohl vertikal, wie horizontal zu drehen ist (noch) nicht möglich.

Die Bewegung wird über Vor- und Zurück-Links unter Verwendung von

$('.threesixty').nextFrame();

und

$('.threesixty').prevFrame();

gesteuert. Die Parameter draggable und useKeys fügen die Steuerung der Bewegung mittels der Pfeiltasten und mittels Ziehen und Bewegens mit der Maus hinzu. Die zunächst vorgesehene Unterstützung des Mausrades hat Entwickler Nick-Jonas wieder fallengelassen.

Threesixty.js ist ein ganz junges Projekt, liegt derzeit in Version 0.1.2 vor und kann kostenlos auf Github heruntergeladen werden. Empfehlenswert ist es natürlich, einen Preloader einzusetzen und die 3D-Ansicht nicht das erste sein zu lassen, was der Besucher auf der Website zu Gesicht bekommen soll. Man kann sich vorstellen, dass mehrere Dutzend Grafiken, speziell dann, wenn es sich nicht um so einfache, wie das Vexel-Juwel des Beispiels handelt, einige Zeit zum Laden benötigen.

Links zum Beitrag

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar

Tabellen mit Dateninhalten sind auf kleinen Screens in Sachen Usability eine Qual. Schon, wenn mehr als zwei Spalten dargestellt werden müssen, beginnt – wenn es gut läuft – die horizontale Scrollerei. Die Übersicht geht schnell verloren. Findige Entwickler brachten zwischenzeitlich eine ganze Reihe von Lösungen für dieses Problem hervor. FooTable, ein schlankes jQuery-Plugin, gehört dabei zu den besten Ansätzen und kann sehr simpel implementiert werden.

FooTable: Tabellensteuerung mit HTML5 Data-Attributen

Wenn eine HTML-Tabelle auf kleinen Geräten aufgerufen wird, versucht der Browser zunächst, die Tabelle in den Viewport zu quetschen, was bereits in den meisten Fällen zur Unbenutzbarkeit führt. Kann der Browser die Tabelle beim besten Willen nicht innerhalb des zur Verfügung stehenden Platzes anzeigen, bricht die Tabelle nach rechts aus und muss horizontal gescrollt werden. Eine Lösung, die im Grunde auf dieses Standardverhalten aufsetzt, es dabei aber kontrolliert einsetzt, ist Zurbs Responsive Tables, das wir hier bei Dr. Web bereits vor einiger Zeit vorstellten.

FooTable geht anders vor. Es setzt nicht auf kontrolliertes horizontales Scrollen unter Verwendung einer Schlüsselspalte, sondern verbirgt, je nach Breakpoint, beliebig viele Spalten. In der ersten Zelle der verbleibenden Spalten wird dann ein großes Plus-Symbol gezeigt, das nach Tap oder Klick unterhalb der Datenreihe die weiteren Inhalte übersichtlich anzeigt.

Das funktioniert mittlerweile neben der reinen Darstellung von Textinformationen, obwohl das Plugin erst wenige Tage alt ist, bereits mit HTML-Inhalten, wie Bildern und Links und lässt sich sogar auf die bekannte Art und Weise sortieren. In Arbeit befindet sich derzeit die Möglichkeit, die Inhalte zu filtern. Derzeit müssen die Datentabellen noch von Hand oder über zusätzliche Programmierung bestückt werden. Für eine spätere Version ist das Laden von Json-Inhalten vorgesehen.

FooTable von Steven Usher und Brad Vincent ist ein kostenloses jQuery-Plugin, das frei über die Website oder aus dem Github-Repository geladen und verwendet werden kann. Es wird unter der liberalen MIT-Lizenz vertrieben und kann so auch für kommerzielle Projekte kostenlos genutzt werden. Die Lizenz ist im Header des Scripts hinterlegt und darf nicht entfernt werden.

FooTable: So funktioniert’s…

Zunächst muss das Plugin, nebst dem zugehörigen CSS, nach dem Aufruf von jQuery selbst im Kopf des Dokuments eingebunden werden.



Dann kann der Funktionsaufruf erfolgen:

FooTable arbeitet, wie im responsiven Design üblich, mit Breakpoints. Per Standard sind zwei Breakpoints, eigentlich drei mit dem Desktop, vordefiniert. Eigene können simpel ergänzt werden. Diese sind bereits vorhanden:

breakpoints: {
  phone: 480,
  tablet: 1024
}

Die eigentliche Tabelle wird nun ganz klassisch mit den dafür vorgesehenen HTML-Tags gebaut. Das kann so aussehen:

Name Phone Email
Bob Builder 555-12345 bob@home.com
Bridget Jones 544-776655 bjones@mysite.com
Tom Cruise 555-99911 cruise1@crazy.com

Anhand des Aufbaus wird schnell deutlich, wie FooTable funktioniert. Die Klasse footable sorgt dafür, dass das Javascript die Tabelle erkennt und verarbeitet. Spalten, die auf bestimmten Auflösungen nicht gezeigt werden sollen, erhalten das Data-Attribut data-hide, gekoppelt mit der Angabe, für welche Breakpoints das gelten soll. Fertig!

Fazit: FooTables Ansatz ist sehr praktikabel und scheint mir bislang die sinnvollste Variante für Tabellen im responsiven Design zu sein. Es lohnt auf jeden Fall, das Plugin für kommende Projekte in Erwägung zu ziehen.

Links zum Beitrag:

  • Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar – Dr. Web Magazin
  • Introducing FooTable – Themergency Blog
  • Responsive Demo mit verschiedenen Breakpoints – Themergency.com
  • FooTable im Repository – Github
  • Produktwebsite – FooTable