Galerien, Lightbox, Juicebox und Co.
Darstellung der Bilder
Im Zuge der Umstellung dieser Seite auf „responsives Design“ wurde auch eine Anpassung der Anzeige der Bilder auf den Galerieseiten notwendig. Die Bilder werden auf Desktop-PCs größtmöglich dargestellt. Die Größe passt sich automatisch an die Größe des Bildschirms an. Hinweis: Bei Bildschirmauflösungen größer als 1920 x 1200 wird das Bild vom Browser „hoch skaliert“, was zu Artefakten in der Darstellung führen kann. Der Grund dafür: Die Bilder sind in einer maximalen horizontalen Auflösung von 1500 Pixel abgelegt.
Lightbox für die Bildanzeige
Die Darstellung mittels „Lightbox“ wird nur auf Desktop-PCs und Tablets verwendet. Neu ist die Steuerung der Anzeige . Die Weiterschaltung zu nächsten oder vorherigen Bild erfolgt innerhalb des Bildes. Die „Steuersymbole“ erscheinen, wenn sich der Mauszeiger über dem Bild befindet. Sie verschwinden, wenn der Mauszeiger außerhalbe des Bildes ist. Schließen der Lightbox kann über das „[ X ]“ in der Bildmitte erfolgen oder durch Mausklick außerhalb des Bildes.
Auch nach der Umstellung der Galerien auf Juicebox ™ wird in manchen Fällen noch die "alte" Lightbox-Darstellung genutzt.
Die Quelle für Lightbox...
Nach der Umstellung der Seite insgesamt, musste auch für die Präsentation der Bilder etwas Neues her. Die bisherige Form in der klassischen Tabellenform wirkte mittlerweile etwas antiquiert, eben etwas angestaubt.
Bei der "Reise" durchs Netz bin ich schon öfter über eine Art der Bildpräsentation gestoßen, bei der die eigentliche Seite im Hintergrund verbleibt und lediglich abgedunkelt wird. Die Lightbox - also sinngemäß "Leuchtkasten", auf den man die Bilder auflegt.
Das Ganze sollte natürlich möglichst ohne Javascript auskommen, also in reinem CSS realisiert werden. Nach ersten eigenen Experimenten und Recherche im Web stieß ich auf einen geniale Lösung von Stu Nicholls.
Seine "Playbox 2" ist eine Lightbox-Variante, die nahezu nur mit Mitteln von CSS realisiert ist. Einzig für den Internet Explorer ist eine kleines Javascript erforderlich. Diese Lösung gibt der Autor auf seiner Seite ausdrücklich für private Seiten frei. Deshalb habe ich seine Lösung verwendet. Anpassungen waren nur in geringem Umfang nötig.
Weitere Informationen sind auf der Seite bzw. den Seiten von Stu Nicholls zu finden. Sehr empfehlenswerte Seiten!
