Öfter mal was Neues: noch eine Foto-Galerie

Hier mal etwas aus dem Dunstkreise Jochen versucht jQuery zu lernen: man kennt sie alle, die vielen Varianten von kostenlosen und kommerziellen Werkzeugen um im Web eine Fotogalerie anzulegen. Im Rahmen meines Selbststudiums habe ich für mich einmal versucht, nur mit jQuery eine möglichst einfache Lösung zu basteln – der JavaScript Code sieht etwas komisch aus, da ich zur Entwicklung TypeScript eingesetzt habe. Wichtig war hierbei der Plan, eine SPA (Single-Page-Application) zu erhalten, also im Wesentlichen nur eine HTML Seite, auf der die Galerie präsentiert wird. Mit jQuery eigentlich kein Problem.

Hier in aller Kürze der Status Quo – keine Ahnung, ob ich da noch jemals etwas daran tue:

  • Am Anfang steht ein kleines Windows Programm (.NET 4.5, WPF, C#), mit dem man eine solche Galerie erstellen kann.
  • Man gibt dem Programm den Namen eines Verzeichnisses mit Bilddateien (diese einfachste Version nimmt nur JPGs), einem Verzeichnis für die Web Seite und eine Überschrift für die Foto-Galerie.
  • Das Programm erzeugt zu jedem Bild ein Mini-Bild, dass proportional so skaliert wird, dass die längste Seite genau 200 Pixel enthält.
  • Die Web Seite erhält nur eine einzige HTML Datei INDEX.HTML, die bei Aufruf eine Übersicht über die ersten 21 Bilder gibt – organisiert in 3 Reihen mit je 7 Mini-Bildern. Eine Navigationsleiste erlaubt es, zwischen den Seiten der Übersicht zu wechseln, wenn man mehr als 21 Bilder hat.
  • Wählt man ein Mini-Bild aus, so wird dieses groß angezeigt. Darüber erscheint eine Navigationsleiste mit 7 Mini-Bildern rund um dieses Bild, die durch Auswahl ein Blättern von Bild zu Bild erlaubt.

Ok, das ist sicher einfach genug. Aber vielleicht doch einige interessante Details – die sich sicher auch ausbauen lassen, wenn man Lust und Zeit hat vor allem das Windows Programm zur Erzeugung anzupassen:

  • In der INDEX.HTML ist der Name des Unterverzeichnisses festgelegt, in dem die Bilder zu finden sind – erzeugt wird immer PICS. Dieser Name ist austauschbar.
  • In dem Unterverzeichnis liegt eine Datei GALERIE.TXT im JSON Format. Diese enthält die wenigen Konfigurationsparameter des Spielprojektes.
  • Zum einen wird hier die Anzahl der Reihen von Mini-Bildern (erzeugt wird immer 3) und die der Mini-Bilder pro Zeile (erzeugt wird immer 7) festgelegt. Man kann hier ein wenig herumspielen, die Detailansicht funktioniert aber nur richtig, wenn die Anzahl pro Zeile ungerade ist.
  • Dazu kommt der Titel, der als Seitenname und Überschrift verwendet wird.
  • Spannender ist die Liste der Bilder, die angezeigt werden sollen. Diese Liste erlaubt es auch, die Reihenfolge der Bilder vorzugeben (erzeugt wird immer eine alphabetisch sortierte Liste). Für die Galerie selbst ist das Format (JPG, PNG, GIF, …) der Bilddateien eigentlich egal, bei der Erzeugung werden aber nur JPG berücksichtigt. Zu jeder Bilddatei muss es aber ein Mini-Bild im gleichen Format mit dem Präfix TN_ geben, dessen längste Seite 200 Pixel lang ist.

Der Wechsel zwischen den Ansichten erfolgt über den Anker (Hash) in der URL. So sieht das dann Live aus (ich habe mal die Bilder aus der Web Seite des DVB.NET / VCR.NET Viewers zusammen geklaubt).

Die Übersicht

Ein Bild

Viel Spaß

Jochen

<Update1>Die Anzahl der Minibilder wird nun dynamisch aus der Größe des Fensters bestimmt, die entsprechenden Parameter wurden aus der Konfiguration entfernt. Klappt leider noch nicht ganz: je nach Breite des Fensters im Übersichtsmodus enthält die unterste Zeile weniger Bilder als die anderen Zeilen.</Update1>