Bildergalerien für Websites, die responsive sind
Auf vielen Websites werden Bildergalerien mit allerlei Funktionen eingesetzt. Stellt man die Website auf responsive Design um, so stellen die Bildergalerien eine besondere Aufgabenstellung dar. Denn, Bildergalerien sind eigentlich dafür entwickelt, um große Bilder in einem gewissen Rahmen ansehnlich zu präsentieren und ggf. mit nützlichen Funktionen zu versehen, z.B. mit einer Thumbnail- oder Blätter-Funktion. Auf Geräten mit einem kleinen Anzeigebereich hat man verschiedene Möglichkeiten, um die Bildergalerie mit responsive Webdesign kompatibel zu gestalten.
Eine Möglichkeit ist, automatisch Scrollleisten anzeigen zu lassen, wenn der verfügbare Platz nicht ausreicht. Neben weiteren Einstellungen, die notwendig sein können, kann man z.B. die CSS-Einstellungen für die Bildergalerie auf overflow: auto; setzen. Scrollleisten sehen bei Bildergalerien jedoch nicht unbedingt ansprechend aus.
Eine weitere Möglichkeit ist, von vornherein eine Bildergalerie einzusetzen, die kompatibel mit responsive Webdesign ist. Beispielsweise ist die Bildergalerie Flexslider von Haus aus responsive. Für Typo3 gibt es die Extension ws_flexslider. Je nach Anforderung kann es hierbei notwendig sein, dass man gewisse Anpassungen vornimmt.
Anforderungen an das Verhalten der Bildergalerien
Ist eine Website responsive und möchte man eine Bildergalerie einsetzen, dann sind zwangsläufig Anforderungen zu definieren, die erfüllt werden müssen. Insbesondere bei kleinen Anzeigebereichen verhalten sich die Bildergalerien nämlich nicht immer so, wie man es sich eigentlich vorstellt. Außerdem muss das Verhalten der Bildergalerie analysiert werden, damit man die Bilder entsprechend aufbereitet.
Da die Anforderungen und das Verhalten der Bildergalerien unterschiedlich sind, sollten die folgenden Punkte an die eigenen Bedürfnisse erweitert und angepasst werden.
Größe des Containers, der Bilder und die Positionierung
Die Bilder einer Galerie werden in der Regel in einem (DIV-) Container platziert. Hierbei ist vor allem festzulegen, ob der Container eine bestimmte Höhe haben soll oder nicht. Denn, hat der Container eine feste Höhe, dann können die Bilder mit wenig CSS-Code vertikal positioniert werden. Hat der Container keine feste Höhe, konnte zumindest in einigen Tests nicht erreicht werden, die Bilder nur mit HTML und CSS vertikal mittig zu positionieren. Die Bilder wurden stets oben positioniert, wenn der Container keine feste Höhe hatte.
Hat der Container eine feste Höhe und betrachtet man die Bildergalerie auf einem Gerät mit einem kleinen Display, wurden die Bilder zwar skaliert. Die Höhe des Containers blieb jedoch. Wollte man, dass der Container skaliert wird, wenn auch die Bilder skaliert werden, dann musste die feste Höhe entfernt werden, wodurch wiederum die Bilder immer oben positioniert wurden.
Mit diesem Umstand konfrontiert, muss die Entscheidung getroffen, ob die Bilder immer eine identische Größe oder zumindest eine identische Höhe haben. Denn, wenn die Bilder immer gleich groß sind, könnte man beim Container in den CSS-Einstellungen auf die Angabe der Höhe verzichten. Der Container würde dadurch immer mit skaliert werden und die Frage, ob die Bilder vertikal mittig positioniert werden, würde sich nicht stellen, da die Bilder immer dieselbe Größe hätten.
Verhalten des Containers beim Laden der Webseite
Die meisten Bildergalerien basieren in der Regel auf JavaScript. Während die Webseite mit den JavaScript-Dateien geladen wird, erhalten die (DIV-) Container bei den meisten Bildergalerien initial die CSS-Einstellung display: none;. Dadurch wird verhindert, dass der Container zunächst riesige Ausmaße annimmt und alle Bilder angezeigt werden (wenn auch kurzzeitig). Nach dem Laden der JavaScript-Dateien wird die CSS-Einstellung per JavaScript auf display: block; gesetzt. Der Container wird dadurch sichtbar und dadurch, dass die JavaScript-Dateien geladen sind, erhält der Container eine normale Galeriegröße und das erste Bild der Galerie wird angezeigt.
Setzt man die CSS-Einstellung initial nicht auf display: none; und lädt die Seite mit den JavaScript-Dateien, kann der Container, aufgrund der Vielzahl der Bilder, zunächst riesige Ausmaße annehmen. Erst nach dem Laden der JavaScript-Dateien erhält der Container eine normale Größe und das erste Bild wird angezeigt. Somit hat man den Effekt, dass die Bilder "hüpfen".
Nun könnte man festlegen, dass man für den Container die Einstellung initial auf display: none; setzt, damit der "Hüpfeffekt" vermieden wird und per JavaScript nach dem Laden auf display: block; umstellt. Ganz so einfach ist es jedoch nicht. Denn, die Umstellung geschieht mit JavaScript. Und eine Webseite sollte eigentlich auch ohne JavaScript funktionieren und dabei sollten lediglich auf "Bequemlichkeiten" verzichtet werden. Setzt man die CSS-Einstellung jedoch initial auf display: none; und lädt die Webseite ohne aktiviertem JavaScript, dann bleibt die Einstellung display: none; erhalten, wird nicht umgestellt und die Bildergalerie wird überhaupt nicht angezeigt. Dadurch würde man den Besuchern die Ansicht der Bilder verwehren, die JavaScript nicht aktiviert haben (wenn auch die Anzahl derer gering ist).
Eine Lösung, um einerseits den Hüpfeffekt zu verhindern und andererseits den Besuchern ohne JavaScript die Bilder anzeigen zu lassen, ist der Einsatz von JavaScript, nur von der umgekehrten Seite. Hierbei setzt man für den Container die CSS-Einstellung initial auf display: block; und beschränkt die Höhe während des Ladevorgangs mit JavaScript. Das würde dazu führen, dass bei Besuchern ohne JavaScript die Höhe nicht beschränkt werden würde und alle Bilder angezeigt würden. Die bequeme Galerieansicht würde zwar entfallen, sie würden jedoch die Bilder sehen. Und bei den Besuchern mit aktiviertem JavaScript würde die Beschränkung der Höhe mittels JavaScript den Hüpfeffekt verhindern.
Nachfolgend ein Beispielcode für JavaScript, um die Höhe des Containers mit der id="galeriecontainer" auf 400px zu beschränken. Es sind natürlich auch andere Werte einsetzbar.
<script type="text/javascript">
document.getElementById("galeriecontainer").style.overflow = "auto";
document.getElementById("galeriecontainer").style.maxHeight = "400px";
</script>Diese Lösung funktioniert insbesondere bei Bildergalerien gut, die eine feste Höhe haben sollen. Ist die Höhe für die Galerie jedoch nicht vorgegeben und stets unterschiedlich, müsste der JavaScript-Code erweitert werden.