Picture-Gallery
Informationen
Template
Dieses Template heißt ' Near The Station '. Die acht Seiten 'Home' (diese Seite) bis Septimus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind. Jede Seite variert: Auf jeder Seite ist ein anderes Bild im oberen Bereich zu sehen und legt sich hinter den Halbkreis. Das schafft Abwechslung und Struktur. Zum Beispiel hier auf Primus (index1.html) oder auf Secundus (index2.html). Icon-Font mit neuer Version: Ja, wir alle lieben die kleinen Icons. Lesen Sie bitte hier unsere Infos dazu auf Quartus (index4.html).
Die Technik
Foto-Gallerie im verschachteltem Grid
Wir haben in diesem Template die beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery gleich hier auf der Seite Home (index.html). Klicken Sie bitte dazu auf die Fotos.Wir haben dafür ein verschachteltes Grid-System angelegt, es besteht nur aus einfachem CSS 'display:inline-block'. Verschachtelt heißt: Unregelmässig innerhalb des Raster-Systems, die Bilder haben verschiedene Größen und einige Bilder strecken sich vertikal oder horizontal über mehrere andere Bilder hinweg. Plus: Wir haben hier zusätzlich noch eine Big Gallery auf der Seite index7.html mit noch mehr Fotos an Bord, das Schema wurde entsprechend erweitert. Praktisch: Tatsächlich haben aber nur 2 der 9 Bilder bzw. 2 der 18 Bilder (bei der Big Gallery) eine abweichende Größe, alle anderen sind 900x500 Pixel groß. Trick: Bei den weißen Rahmen haben wir 'border' durch 'box-shadow' ersetzt, denn ein border-Rahmen würde ja durch die Duplizierung bei z.B. 4 Fotos andere Abstände verursachen als z.B. bei nur 1 Foto.
Auf den anderen Seiten haben wir auch jeweils eine unterschiedliche Anzahl von Fotos im Inhaltsbereich eingebaut, aber hier als Variation ohne die Lightbox-Gallery. Gerne können Sie natürlich die Lightbox-Gallery auch auf die Fotos der anderen Seiten legen, wenn Sie möchten.
Was macht die Lightbox?
Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild 1 von X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Wenn mehrere Fotos in einer Gruppe zusammengefaßt sind, ergibt sich folgendes tolle Feature: Fahren Sie mit der Maus über die rechte oder linke Fotohälfte. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf diesen immer weiter zum nächsten Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen.Die Original-Lightbox
Hier einmal der Link zur originalen Lightbox-Gallery. Dort finden Sie bei Bedarf auch unter 'Options' noch verschiedene Möglichkeiten der Einstellung. Anhand der guten, weil einfachen Beispiele (Examples), erkennen Sie sehr schnell das Prinzip der Gallerie. Außerdem können Sie somit auch besser nachvollziehen, wie wir die Fotos bei unserer Gallerie responsive angelegt haben, denn diese responsive Anordnung ist ja nicht automatisch im genannten Script der Lightbox enthalten.Einbau der Bilder
Bei den Fotos im Inhaltsbereich haben wir uns für die CSS-Technik mit 'display:inline-block' entschieden. Wir beschreiben es Ihnen hier in einem Tutorial auf der Seite Quartus (index4.html)
