Lightbox Info

Lightbox Picture Gallery

Auf den Seiten Home und Quartus haben wir für Sie eine Bilder-Gallerie eingebaut. 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.

Lightbox 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 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. Mehr Infos dazu auch hier bei Quartus






Die Technik

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. Außerdem wird beim Layout verstärkt mit Prozent-Angaben gearbeitet.

Test It The Easy Way

Hier auf der Seite index1.html (Primus) 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.

Das Layout

Das Haupt-Menü

Das Hauptmenü (Home bis Sextus) haben wir bereits beispielhaft verlinkt. Die Icons im Menü sind übringes Font-Icons, welche hier mit dem Pseudoelement ":before" bzw. "after" angelegt wurden.

Bei Mausberührung erscheint ein 'Checked-Icon' und beim jeweils akuell angeklicktem Link sehen Sie ein 'Bookmark-Icon', also ein Lesezeichen-Icon passend zum Namen dieses Templates. Vorteil: Mit nur einer Änderung in der CSS-Datei wechseln Sie bei Bedarf die Menü-Icons in allen HTML-Seiten auf einmal.
 
2040 Homely Literature