Informationen

Template

Dieses Template heißt ' Cakes & Coffee '. 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.

Jquery Foto-Slideshow 1: Fotorama

Im oberen Bereich sehen Sie einen automatisch startenden Bildwechsler, die Fotos schieben sich im 4-Sek.-Takt (ggfls. andere Takt einstellbar) zum Rand hinaus. Auf den einzelnen Seiten haben wir mal im Beispiel unterschiedliche Fotos sowie auch eine unterschiedliche Zahl an Fotos eingebaut oder auch mal verschiedene Geschwindigkeiten wie auf Secundus (index2.html) mit 2 Fotos, aber in 8 Sekunden-Abstand (data-autoplay="8000"). Kurz gesagt: Auf jeder Seite können Sie bei Bedarf die Anzahl der Fotos und die Geschwindigkeit des Wechsels individuell einstellen. Tipp: Sie können die Slideshow auch per Klick auf die Pfeile manuell durchschalten.

Jquery Foto-Slideshow 2: Elastislide

Auf der Startseite sehen Sie im Inhalts-Bereich einen Bildwechsler, 2 mal angelegt mit weißem Rahmen und hinterlegtem Schatten, der viele Bilder nebeneinander darstellt (je höher die Bildschirmauflösung wird, desto mehr Bilder werden angezeigt) und bei Klick auf dem im weißen Bilder-Rahmen platzierten Pfeil gleich mehrere Bilder zur Seite schiebt. Minimal drei Fotos sind für dieses Script nötig). Außerdem öffnet sich bei Klick auf eines der Fotos (wenn man es verlinkt, was wir getan haben) ein entsprechend größeres Foto.
Um die Ladezeiten dieser Bilder gering zu halten, haben wir jeweils ein kleines Bild für die Sofort-Ansicht angelegt (small-picture) sowie ein größeres, d.h. erst bei Klick wird das größere Foto mit mehr KB geladen. Wie Sie diese Fotoshow noch aufwerten können, lesen Sie weiter unten (Fotoshows verbinden).

Jquery Foto-Gallerie: Lightbox

Wir haben in diesem Template die bekannte und beliebte 'Lightbox' Foto-Gallerie eingebaut. Und zwar finden Sie die Gallery auf der Seite Primus (index1.html). Klicken Sie bitte dazu auf die Fotos. 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.

Die Technik

Was macht die Lightbox?

Nach Klick auf einem 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.

Fotoshows verbinden - Index7

Jquery Elastislide + Jquery Lightbox. Sie können diese beiden genannten Fotoshows miteinander kombinieren. Schauen Sie hier auf der Geheim-Seite index7.html. Dort haben wir ein Beispiel für Sie angelegt.

Responsive Webdesign

Responsive Webdesign

Responsive Webdesign (RWD) ermöglicht eine Anpassung bzw. Optimierung der unterschiedlichen Bildschirmgrößen von Smartphone, Tablet, Notebook, Laptop und Desktop-PC innerhalb einer einzigen Webseite. Dazu werden per CSS-Media Queries die verschiedenen Bildschirmgrössen abgefragt. Somit kann man auch auf das Hoch- oder Querformat eines mobilen Gerätes reagieren. Außerdem wird beim Layout verstärkt mit Angaben in Prozent gearbeitet.

So testen Sie

Hier auf der Seite Primus (index1.html) nennen wir Ihnen gute Möglichkeiten ein Responsive-Layout in verschiedenen Auflösungen zu testen, denn nicht jeder hat ja diverse Smartphones und Tablets zu Hause.