Die Dokumentation ist ausführlich und übersichtlich.
Fotorama
Mit Fotorama Bildergalerie kann man auf unkomplizierte Weise eine Slideshow erstellen. Auf der Startseite von Fotorama befindet sich die einfachste Form dieser Fotorama Bildergalerie als Quelltext zum kopieren und einfügen.
Dieses einfache Beispiel wurde hier verwendet.
Auf Seite 2 wurden Vorschaubildchen verwendet. Dazu verwendet man das Attribut: data-nav="thumbs" siehe dazu auch die Dokumentation auf Fotorama /customize / thumbnails
Außerdem wurden die Vorschaubildchen nicht nur simuliert, indem die großen Bilder kleiner dargestellt werden, sondern es werden kleine Vorschaubildchen geladen. Das verringert die Ladezeit. Diese Bilder müssen referenziert werden das geschieht folgendermaßen.
<a href="img/1big.jpg"><img src="img/1thumb.jpg"></a>
In dieen Beispielen wurden alle Dateien, die benötigt werden nicht per CDN geladen (also von einer URL im Netz) sondern die Dateien wurden runtergeladen und referenziert. Auch das kann die Performance oder Ladezeit erhöhen. Außerdem ist man unabhängig von den Servern, auf denen die Dateien zur Verfügung gestellt werden. Man benötigt, die fotorama Dateien, die man sich auf der Startseite von Fotorama herunterladen kann und die Jquery Datei, welche man sich bei Jquery herunterladen kann. Diese werden dann auf den eigenen Server geladen und entsprechend referenziert. Siehe Head Bereich..
Außerdem wurde ein CSS Style Sheet hinzugefügt im Head Bereich der Seiten, hat die max-widht, der Bildbreite bekommen und ein margin auto, damit es mittig plaziert ist.
Seite2 Seite3 Seite4 es gibt verschiedene Möglichkeiten die Größe der Bilder zu definieren, siehe dazu customize, dimensions
Seite6 und Seite 7 zeigt die Möglichkeit einen Fullscreen Button einzufügen. siehe dazu customize / fullscreen
Siehe dazu die Dokumentation und die Liste aller Attribute