Informationen
Template
Dieses Template heißt ' Above The Clouds '. Die Seiten 'Home' (diese Seite) bis Sextus, sind bereits als Beispiel verlinkt. Bitte klicken Sie diese, um zusätzliche Infos zu erfahren und zu sehen wie die Unterseiten angelegt sind.Slide-Show
Es wurde im oberen Bereich ein animierter Bildwechsler eingebaut. Die 8 Bilder werden jeweils nach links hinausgeschoben. Dazu gibt es noch einen Anzeiger für die Anzahl der wechselnden Bilder (Offene bzw. volle Ringe per Font-Icons). Alles nur per CSS-Keyframes und ohne Javascript. Das macht doch Laune! Wir beschreiben es Ihnen hier bei Quartus (index4.html) näher.Übrigens: Auf den Seiten Home, Secundus und Quartus läuft die Animation standardmässig vorwärts ab, auf den Seiten Primus, Tertius und Quintus lasssen wir die Slideshow rückwärts ablaufen (animation-direction: reverse). Und auf der Seite Sextus läuft die Animation vorwärts durch und gleich danach rückwärts (animation-direction: alternate).
Die Technik
Lightbox
Wir haben in diesem Template die beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery gleich zweimal auf dieser Seite (home - index.html). Klicken Sie bitte dazu auf die Fotos. Auf den Unterseiten 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 Unterseiten 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)
