Jquery Slider 'Slick'
Einer, der sich mal wirklich lohnt
Zu sehen auf der Startseite.Der oben genannte Slider, welcher nicht nur Bilder sondern auch Text oder andere Elemente responsive aufnimmt, ist gerade deshalb einer der Besten, insbesondere auch weil die Einstellungsmöglichkeiten vielfältig sind und er andere Jquery-Slider, welche viel einseitiger sind, überflüssig macht.
Wir haben in diesem Template den Slider natürlich schon responsive angepaßt und Sie können einfach neue Bilder/Objekte hinzufügen bzw. auch löschen. Aber vielleicht möchten Sie noch weiter experimentieren oder andere Optionen nutzen. So finden Sie hier dazu die Demos bzw. Einstellungen des Anbieters:
Demo 1 und Demo 2
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 sehen nicht nur auf dieser Seite (index4.html) die Lightbox-Gallery, sondern wir haben auch eine auf der Startseite (index.html) angelegt. Übrigens: 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.