This is Quartus.

Gallery Lightbox

Lightbox Picture Gallery

Nachstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf ein Foto öffnet sich ein neues Fenster mit dem Foto sowie einer Bildunterschrift und einer Anzeige (Bild X von Anzahl X), gleichzeitig dunkelt sich die komplette Webseite im Hintergrund ab. Es ist ein Jquery-Script.

Tolles Feature: Nachdem Sie ein Bild geklickt haben, fahren Sie mit der Maus über die rechte oder linke Fotohälfte des Bildes. Es erscheint dann ein Pfeil, welcher Sie durch Klick auf dieses immer weiter zum nächsten bzw. vorangehendem Foto führt. In diesem Fenster lässt sich also eine ganze Bildkollektion durchsehen. Zum Schließen des Fenster klickt man auf das 'Schließen-Symbol' oder irgendwo ausserhalb des Fensters.

Lightbox auf allen Fotos

Sie könnten das Lightbox-Script auch auf alle Fotos anwenden, wenn Sie möchten. Die entsprechenden Änderungen dazu sind nur in der HTML-Datei zu tätigen, denn das Script ist ja bereits eingebaut. Hier ist der Basis-Code:

<a href="images/beispiel.jpg"
data-lightbox="gruppe1"
data-title="Ihre Bildunterschrift">
<img src="images/beispiel.jpg" width="900" height="500"></a>

Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1. Ach ja, die Bildabemessungen (width und height) sind hier mit 900 und 500 die unserer Bilder, welche sich dann ja responsive anpassen.

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.

Bilder

Hinweis: Die Fotos in dieser Vorlage sind von 'picjumbo'. Wir haben diese innerhalb unseres eigenen Grid-Systems responsive angelegt. Gerne können Sie natürlich auch Ihre eigenen Fotos verwenden.

Icons

Wir verwenden Icon-Fonts

Font-Icons sind sozusagen grafisch wirkende Schriftzeichen, die aber wie normaler Text behandelt werden (denn es sind ja Textzeichen) und damit eine schnellere und leichtere Formatierung gegenüber grafischen Icons per Bildformat (z.b. gif, jpg oder png) ermöglichen. Wir haben eine der beliebtesten Icon-Schriften in dieser Vorlage bereits anbei. Sie heißt "Fontawesome".

Font Awesome

Viele weitere Icons sind möglich, denn die Icon-Schrift "FontAwesome" ist ja bereits in dieser Vorlage installiert. So fügen Sie ggfls. weitere Icons hinzu oder ersetzen die vorhandenen.

Die Dateien der Icon-Schrift sind also bereits diesem Template beigefügt mit dem großen Vorteil, das die Icons somit auch geladen und angezeigt werden, wenn keine Internet-Verbindung besteht.

Die Icon-Schrift kann aber statt dessen auch noch einfacher durch einen entsprechenden Link im Kopfbereich der Seite aufgerufen werden, die Schrift wird dann serverseitig geladen, sehen Sie hierzu die Erklärungen auf der Seite des Anbieters. Dies mag für manche der leichtere Weg sein, falls man ein Versions-Update aktualisieren möchte. Aber wie gesagt: Besteht keine Internet-Verbindung, so wird in diesem Fall auch kein Icon angezeigt.

Wir haben die Icons schon für Sie angepasst. Denn ohne weitere Bearbeitung sind die Font-Icons immer genauso groß und erscheinen in gleicher Farbe wie die aktuell verwendete Schrift für den Text.

Als Beispiel:      

Slider (Bildwechsler)

Bei der automatisch startenden CSS-Slideshow wurden die Fotos als CSS Hintergrund-Grafiken eingebaut. Außerdem gibt es einen Bildanzeiger, sprich die farbigen Kreise (Font-Icons), welche die Gesamtzahl der Fotos sowie das aktuelle Foto anzeigen. Alles zu finden in der css-Datei 'animation.css'. Die Animation wird durch den CSS-Befehl 'animation' ausgelöst, wie nachstehend:

CSS
#slider {
ANIMATION: slide 60s infinite;
ANIMATION-DIRECTION:normal;
}

Ändern, die wichtigsten Möglichkeiten

animation: slide 60s infinite:
Der frei zu vergebenen Name der Animation lautet hier 'slide', die Dauer des Durchlaufes für alle 8 Fotos beträgt 60 Sekunden, wobei die Slideshow als Loop unendlich (infinite) läuft, also immer wieder von vorne beginnt. Sie können den Wert für die Dauer ändern sowie auch statt des Schlüsselwortes 'infinite' eine beliebige Zahl festlegen, z.B.:
'animation: slide 120s 4' bedeutet, das die 8 Fotos in 2 Minuten getauscht werden und die Animation 4 x durchläuft und danach stoppt.

animation-direction:normal:
Hier läßt sich die Richtung der Animation beinflussen, statt 'normal' (vorwärts abspielen), können Sie auch folgendes wählen:
reverse = Die Animation wird in jedem Durchlauf rückwärts abgespielt.
alternate = Die Animation ändert in jedem Durchlauf die Richtung, spielt also abwechselnd vorwärts und rückwärts ab. Somit werden die Schritte der Animation also in jedem zweiten Durchgang rückwärts durchgeführt.
alternate-reverse = Ähnlich wie 'alternate', startet aber mit Rückwärts-Durchlauf.

Hinweis: Wie gesagt, einfach den entsprechenden Wert bei 'animation-direction' eintragen. Nur weil wir in diesem Template mal 'normal, reverse und alternate' alle zusammen anzeigen wollten, haben wir diese folgenden CSS-Klassen gebildet (die sind normalerweise nicht nötig):

CSS
#slider.reverse {
ANIMATION-DIRECTION:reverse;
}
#slider.alternate {
ANIMATION-DIRECTION:alternate;
}

Ergebnis:
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).