Die Galerie orientiert sich in ihrer Funktionsweise an Apple's iTunes Musik Bibliothek. Sie dient allerdings nicht nur dem Zweck der Darstellung von Bildmaterial, sondern gibt darüber hinaus auch weiterführende Informationen. Somit kann diese Arbeit nicht nur als Bildergalerie genutzt werden, sondern auch als eine Art Projektgalerie, wie in diesem Fall mit einer Slideshow, Informationen zum Projekt und einem optionalen Link.

Die HTML-Datei besteht im großen und ganzen aus 2 Bereichen. Der erste Bereich ist ein Container mit den jeweiligen Vorschaubildern der einzelnen Projekte. Ein weiterer, nicht sichtbarer Container beinhaltet diverse canvas-Elemente für mit jQuery gezeichnete Piktogramme (schliessen, nächstes Bild, vorheriges Bild sowie ein canvas-Element als Markierung für das derzeit geöffnete Projekt) und ein p-Element zur Ausgabe der aktuellen Bildnummer der Slideshow. Der Container mit den unterschiedlichen Zahlenwerten dient lediglich zur Demonstration.

Die Galerie besitzt ein responsives Webdesign, weshalb bei Klick auf eines der Projekte zuerst mittels einer Funktion die Anzahl der Spalten ermittelt werden muss. Dies geschieht ganz einfach indem Breite des ersten Bildes und dessen Außenabstände, links und rechts, addiert und solange mit einer größer werdenden Zahl multipliziert werden, bis das Ergebnis größer als die Breite des Browserfensters ist.
Ergebnis = x * (Breite erstes Bild + Außenabstände (links & rechts) erstes Bild) //x = 0, 1, 2, 3, ...
Vergleich Breite des Browserfensters mit dem Ergebnis → Spaltenanzahl = x Auf diesem Wege, kann zu jeder Browserbreite die maximale Spaltenanzahl berechnet werden.
Es wird weiterhin über jQuery der Container für die Projektdetails erstellt. Um den richtigen Einfügepunkt zu finden, kann nun über den Index des geklickten Bildes und die Spaltenanzahl das jeweilige Ende einer bestimmten Reihe ermittelt werden, um den Container einzufügen.
Sollte man vor einem Monitor sitzen und das Fenster selbstständig in der Größe ändern, muss auch auf die sich verändernde Spaltenanzahl bei geöffneten Details reagiert werden. Hierzu werden abermals der Index des geklickten Elements sowie die dabei kontinuierlich abgefragte Spaltenanzahl benötigt. Hinzu kommen der Einfügepunkt zum Zeitpunkt des Klicks und der neue Einfügepunkt zur aktuellen Spaltenanzahl. Die Differenz zwischen altem und neuem Einfügepunkt gibt hierbei die Anzahl der zu verschiebenden Bilder an, die entweder vor den geöffneten Container "projektDetails" oder dahinter springen. Dabei werden die Bilder in einer Varbiable zwischengespeichert, gelöscht und an der neuen Position eingefügt – es wird die Reihenfolge im DOM manipuliert.

Nachdem die Informationen über das Projekt mittles AJAX und der entsprechenden jQuery-Funktion load() geladen wurden, werden die zuvor erstellten canvas-Elemente und das p-Element dem unsichtbaren Container entnommen und in "projektDetails" eingefügt, um durch die besagte Slideshow zu navigieren oder aber den Container wieder zu schliessen. Danach öffnet sich der Container "projektDetails".
Schliessen erfolgt dabei über das "x" oder die umgebende, gräuliche Fläche. Wird eines der beiden Elemente geklickt, wird die Funktion slideToggle() erneut aufgerufen, der Container wird geschlossen, die Navigationselemente zurück in den unsichtbaren Container gelegt und "projektDetails" vollständig gelöscht.

Die Slideshow muss nicht zwingend über die Navaigationspfeile betätigt werden. Hierfür habe ich einfache Wischgesten implementiert. Eine vertikale Wischgeste hoch und runter kann somit verwendet werden. In diesem Beispiel wurden die Touchgesten auf die Maus gespiegelt, um dies auch am heimischen, nicht touch-fähigen Monitor auszuprobieren.

Mit Hilfe von CSS3 und den Media Queries wird dabei auf die sich ändernde Browserbreite reagiert, Elemente verschoben oder ihre Größe angepasst. Innerhalb des Stylesheets wird zwischen 4 Bereichen unterschieden.
@media screen and (min-width: 320px) and (max-width: 479px) → Smartphones - vertikal / Monitor
@media screen and (min-width: 480px) and (max-width: 767px) → Smartphones - horizontal / Monitor
@media screen and (min-width: 768px) and (max-width: 1023px) → Tablets - vertikal / Monitor
@media screen and (min-width: 1024px) → Tablets - horizontal / Monitor
Damit die Einstellungen auch auf mobilen Geräten übernommen werden, muss eine meta-Angabe bzgl. des Viewports gemacht werden.
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=10.0"> Durch width=device-width kann man dafür sorgen, dass Inhalt und Anzeigebereich übereinstimmen. Bei schmaleren Layouts wird dadurch z.B. kein unnötiger Platz verschenkt, sondern die Website in der möglichen Maximalgröße dargestellt. Über die Skalierungsangaben kann der Zoomfaktor angegeben werden. Will man den Zoom verhindern, kann entweder maximum-scale auf 1.0 gesetzt oder aber user-scalable=no für maximum-scale eingesetzt werden.

  Schau dir die Demonstration an