Quartus

## Foto-Galerie Lightbox

## Die Lightbox

### Lightbox Picture Gallery

Vorstehend unsere Bilder-Gallerie. So funktioniert diese Foto-Schau: Nach Klick auf einem 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 anderen Fotos, welche mit dem 'img-Tag' (und nicht als 'Hintergrund-Image') eingebaut sind, anwenden. 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 als Beispiel:
Bild ohne Lightbox:

    HTML
    <img src="images/beispiel.jpg" width="800" height="530">

Bild mit Lightbox:

    HTML
    <a href="images/beispiel.jpg"
    data-lightbox="gruppe1"
    data-title="Ihre Bildunterschrift">
    <img src="images/beispiel.jpg" width="800" height="530"></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.

### 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.

## Smooth-Scroll-Effekt

Beispiel-Link für Smooth-Scroll (sanftes Scrollen) To Bottom, scrollt animiert nach unten zum Fuss der Seite.
Sie können überall in den einzelnen HTML-Seiten so einen Smooth-Scroll-Link setzen, egal ob dieser nach oben oder nach unten scrollt und egal zu welchem Abschnitt, es kann also jede beliebige Position innerhalb der Seite angesprochen werden. Der entsprechende Link muß nur auf eine beliebige CSS-ID verweisen. Hier im Beispiel ist es die id="pagebottom", welche wir auf dieser HTML-Seite vergeben haben. Es ist also im Prinzip der gute alte HTML-Anker, welcher hier durch das eingebaute Jquery (Javascript), welches die Animation vollzieht, sehr aufgewertet wird und so zu Recht immens beliebt ist.
Noch ein Beispiel: Klicken Sie diesen Link To Top für Smooth-Scroll. Um hier im Beispiel nach oben an den Seitenanfang zu springen haben wir eine CSS-ID namens id="pagetop" vergeben.

## Bilder im Kopfbereich anpassen

Sie sehen im Kopfbereich auf jeder Seite ein anderes Foto, welches sich hinter das halbtransparente Menü legt. In der Datei 'format.css' finden Sie hier die entsprechende Formatierung bzw. den Schlüssel um die Fotos auszutauschen:
Bilder ändern:

    CSS
    #logo.home {background-image:url(../images/logo.jpg) }
    #logo.primus {background-image:url(../images/logo04.jpg) }
    #logo.secundus {background-image:url(../images/logo02.jpg) }
    #logo.tertius {background-image:url(../images/logo05.jpg) }
    #logo.quartus {background-image:url(../images/logo03.jpg) }
    #logo.quintus {background-image:url(../images/logo07.jpg) }
    #logo.sextus {background-image:url(../images/logo06.jpg) }

### Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

### Navigation 2nd

- Link 01
- Link 02
- Link 03
- Weitere Links
- More

### Vero Eos

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Agua liquid dolor sit amet. Magna dias es bella terra mi sol.

### Picture of the month

Title: A nice view.
2040 La Bella Vita