Auf etlichen Webseiten sieht man heute schicke Bildergalerien. Durch neue Techniken wie HTML5 und CSS ergeben sich auch immer mehr Möglichkeiten, die es vor einigen Jahren noch nicht gab. Auch JavaScript-Bibliotheken wie jQuery ermöglichen es, mit wenig Aufwand eine schicke Galerie zu erstellen. Beachten muss man hierbei allerdings, dass die Bibliothek (wie jQuery oder mooTools) auch erstmal geladen werden muss. Bei mobilen Internetverbindungen kann das teilweise etwas länger dauern.
Wenn man es etwas schlichter und einfacher mag, kann man auch auf viel Schnick-Schnack und überladene Effekte verzichten und mit ein paar wenigen Zeilen JavaScript eine kleine Galerie zaubern. Wie das geht, ist z. B. bei helpster.de beschrieben. Bei dem dort vorgestellten Code wird ein Array von Fotos angelegt, die beim Klick auf einen Button geladen werden. Wie auch bei unseren Javascripts muss der Code dort an die eigenen Bedürfnisse etwas angepasst werden, d. h. man muss die Namen der Fotos, also der Bilddateien im Script selbst hinterlegen. Statt Buttons kann man aber auch ganz normale Links nehmen, wenn das onclick-Attribut dabei mit hinterlegt wird.
Der bei helpster.de gezeigte Code soll helfen, die Funktionsweise der Bildergalerie besser zu verstehen. Daher ist es auch bewußt schlicht gehalten worden. Selbstverständlich kann man auch – damit es nicht ganz so trostlos aussieht – diesen Code noch etwas anpassen und die Elemente (also die Fotos und Buttons) etwas stylen. Dazu wird natürlich CSS genutzt:
Um dem Bild einen Rahmen zu geben versieht man das img-Tag zuerst noch mit einem id-Attribut. Aus
<img name="image" src="blank.gif">
wird also
<img name="image" src="blank.gif" id="bildergalerie">
Um dem Bild einen Rahmen zu geben, wird folgende CSS-Anweisung festgelegt:
#bildergalerie {
border: 2px solid #999999;
padding: 2px;
}
Mit border definiert man einen Rahmen. 2px legt die Stärke (also die Breite) fest, solid steht für eine durchgängige Linie (probiert statt solid auch mal inset oder outset). Mit #999999 wird der Farbwert festgelegt (mehr in unserer Farbtabelle).
Mit padding: 2px definiert man, dass es zwischen dem Rahmen und dem Bild noch einen 2 Pixel großen Abstand – den inneren Abstand (padding) – geben soll.
Wenn wir schon dabei sind, können wir auch die Buttons noch etwas hübscher machen. Dazu bekommen beide Buttons ein class-Attribut:
<input type="button" value="zurück" onClick="if (i>0) { LoadPic(--i) };" class="galeriebutton">
<input type="button" value="vor" onClick="if (i<pictures.length-1) { LoadPic(++i) };" class="galeriebutton">
Den Galeriebutton machen wir z. B. blau mit weißer Schrift. Auch das sind natürlich nur Beispiele und können weiter ausgebaut und/oder verändert werden. Der CSS-Code dazu ist folgender:
.galeriebutton {
background-color: #003399;
color: #ffffff;
}
Die Galerie sieht dann so aus:
Und nun viel Spass beim ausprobieren 🙂
Neueste Kommentare