05.09.2009

CSS Fotoalbum / CSS Bildergalerie

Neben zahlreichen anderen Kuriositäten hat der CSS-Tüftler Stu Nicholls auch ein CSS-basiertes Fotoalbum entwickelt, das er auf seiner Seite CSS play präsentiert.
Wir wollen es an dieser Stelle Schritt für Schritt nachbauen und erklären wie's funktioniert. Allerdings weise ich ebenso darauf hin, dass dies eher ein CSS-Experiment, als eine praktikable Lösung für Fotogalerien ist. Der manuelle Codeaufwand hierfür ist nämlich ziemlich umfangreich. Deshalb empfehle ich für Fotoalben eher fertige Lösungen, die es auch kostenlos im Web gibt. So verwende ich für meine Handballfotos das recht einfach zu handhabende Programm HomeGallery.
Zum Einsatz kommen nun beim CSS-Fotoalbum einige Handballfotos, die ich beim international besetzten "Pfalzcup 2009" in Ludwigshafen aufgenommen habe. Im Endstadium haben wir dann dieses Album als Ergebnis.

Starten wir mit dem erforderlichen HTML-Code, bei dem eine Liste in eine Albumbox gesetzt wird. Somit nichts Außergewöhnliches. Die einzelnen Links sollen später lediglich den Bildwechsel ermöglichen. Sie brauchen deshalb keine Zieladresse, so dass wir als Platzhalter eine Raute # verwenden können. Die Linkbezeichnung entspricht der fortlaufenden Bildnummer mit der dazugehörigen Grafik. Den Grafiken weisen wir noch unterschiedliche Klassen zu, je nachdem, ob quer- oder hochformatige Fotos zum Einsatz kommen. Das Demo-Fotoalbum besteht aus zehn Bildern. Zwecks Übersichtlichkeit will ich mich hier auf zwei beschränken, eines im Quer- und eines im Hochformat. In den Demos wird jeweils das komplette Album angezeigt.

HTML-Code:

<h1>CSS Fotoalbum</h1>

<div id="album">

<ul class="gallery">

<li>
<a href="#">01<img class="quer" src="handball01.jpg" alt="bild1"></a>
</li>

<li>
<a href="#">02<img class="hoch" src="handball09.jpg" alt="bild2"></a>
</li>

</ul>

</div> <!-- Ende #album -->

Sehen wir uns das noch völlig unformatierte Ergebnis in Demo 1 an, so hat das noch herzlich wenig mit einem Fotoalbum zu tun. Ausschließlich mit einigen CSS-Angaben wird es uns jedoch gelingen, ein recht ansprechendes Fotoalbum hervorzuzaubern.

Im zweiten Schritt formatieren wir die Albumbox #album und die ul-Liste .gallery, in der sich die anklickbaren Bild-Nummern befinden.
Die Größe der Albumbox ist abhängig von der Bildgröße und der Größe der "Klickleiste". Hier kommen Fotos im Format 320px auf 240px (Querformat) bzw. 240px auf 320px (Hochformat) zum Einsatz. Die Klickleiste soll 40px hoch werden, so dass sich eine Albumgröße von 320px auf 360px ergibt. Dies reicht aus, um darin sowohl quer- als auch hochformatige Bilder zu platzieren. Falls ihr andere Fotogrößen verwendet, müsst ihr die width- und height-Werte von #album entsprechend anpassen.

Dem #album weisen wir noch eine positionierte Hintergrundgrafik zu, sozusagen das "Startbild" unseres Fotoalbums.
Die Galerie-Liste enthält einen oberen Abstand von 320px. Wichtig ist, dass wir sie relativ positionieren. Dies dient dazu, dass die später absolut positionierten Fotos einen Bezugspunkt haben und somit an der richtigen Stelle im Album erscheinen. Schließlich entfernen wir noch die standardmäßigen Listenpunkte.
Daraus ergeben sich folgende Styleangaben:

/*--Formatierung der Albumbox--*/
#album {
width: 320px;
height: 360px;
background: #eee url(titel.jpg) 0 40px no-repeat;
border: 1px solid #aaa;
margin: 20px auto;
}

/*--Formatierung der Linkleiste--*/
.gallery {
padding: 0;
margin: 320px 0 0 0;
list-style-type: none;
position: relative;
width: 320px;
}

Nun denn, so richtig weiter sind wir damit noch nicht gekommen, wie Demo 2 zeigt.
Im nächsten Schritt wollen wir die "Bildnummern" formatieren, also die "Kästchen" auf die man draufklickt, wenn ein neues Bild erscheinen soll. Die Größen der Navigationsflächen sind unter Berücksichtigung von border- und margin-Werten so bemessen, dass wir in der Galerieleiste insgesamt zehn Buttons unterbringen, entsprechend der Anzahl unserer Fotos. Im Prinzip handelt es sich um eine ganz normale Formatierung wie wir sie von einer gewöhnlichen horizontalen Navigatiion gewohnt sind. Auf die einzelnen Angaben brauche ich deshalb nicht näher einzugehen.

/*--Horizontale Anordnung der Listeneinträge--*/
.gallery li {
float: left;
}

/*--Formatierung der Link-Buttons--*/
.gallery li a, .gallery li a:visited {
font-size: 11px;
display: block;
text-decoration: none;
color: #000;
background: #fff;
text-align: center;
width: 26px;
height: 26px;
line-height: 24px;
border: 1px solid #444;
margin: 2px;
}

/*--Hover-Formatierung der Link-Buttons--*/
.gallery li a:hover {
background: #ddd;
}

/*active und focus-Formatierung der Link-Buttons*/
.gallery li a:active, .gallery li a:focus {
background: #444;
color: #fff;
}

Als Ergebnis erhalten wir in Demo 3 unsere Fotobox, in der das Standardbild hinterlegt ist. Darunter sind bereits die einzelnen Links zur Anzeige der Einzelbilder angeordnet. Jetzt müssen wir dafür sorgen, dass zunächst alle Einzelbilder verschwinden, denn sie sollen ja nur angezeigt werden, wenn man auf die entsprechende Link-Nummer klickt.

Die Angabe visibility: hidden "versteckt" die den Links zugeordneten Bilder:

/*-- Blendet die Bilder aus--*/
.gallery li a img {
visibility: hidden;
border: 0;
}

In Demo 4 sind die einzelnen Fotos ausgeblendet und wir haben ein ordentliches Album mit einer Navigation zum Anklicken der Einzelbild-Nummern.
Nun müssen die Einzelbilder beim Klicken noch eingeblendet werden.

Ihr erinnert euch: Die untere Galerieleiste mit den Bildnummern hat einen oberen Abstand von 320px und wurde relativ positioniert. Genau dazu verschieben wir die versteckten Bilder durch absolute Positionierung nach oben, damit sie später korrekt in der Albumbox wieder erscheinen. Wir müssen nun unterscheiden, ob es sich um quer- oder hochformatige Bilder handelt. Die querformatigen Bilder positionieren wir mit der Klasse .quer absolut zur Linkleiste um minus 280px nach oben. Links werden sie am Rand positioniert:

/*--Positionierung der Querformat-Bilder--*/
.gallery li a img.quer {
position: absolute;
top: -280px;
left: 0;
}

Die hochformatigen Fotos schieben wir per Klasse .hoch in voller Höhe, nämlich um -320px nach oben, was ebenfalls durch absolute Positionierung erfolgt. Auch hier erfolgt wieder eine linke Positionierung mit left: 0; am Rand des Albums. Damit bei der Anzeige der Hochformatfotos nicht unser Standard-Start-Bild im Hintergrund erscheint, müssen wir dieses "verdecken". Dazu weisen wir den hochformatigen Bildern noch einen linken und rechten Rahmen von je 40px Breite (320px Boxbreite abzüglich 240px Bildbreite geteilt durch zwei Rahmen) in der Hintergrundfarbe der Albumbox zu:

/*--Positionierung der Hochformat-Bilder*/
.gallery li a img.hoch {
position: absolute;
top: -320px;
left: 0;
border-left: 40px solid #eee;
border-right: 40px solid #eee;
}

Mit diesen beiden Klassen hat sich noch nichts Sichtbares verändert, denn die Einzelbilder sind ja nach wie vor versteckt. Sie sind nun lediglich so positioniert, dass sie beim Erscheinen korrekt eingeblendet werden.
Zaubern wir deshalb die Einzelfotos durch Klicken hervor. Hierzu muss der Linkzustand "active" und "focus" lediglich auf visibility: visible eingetellt werden:

/*--Einblenden der Bilder im active/focus-Zustand--*/
.gallery li a:active img, .gallery li a:focus img {
visibility: visible;
}

Damit ist unser CSS-Fotoalbum fertig und voll funktionsfähig, wie in Demo 5 zu sehen. Es eignet sich für überschaubare Alben mit nicht allzu vielen Bildern. Die Größe könnt ihr dabei individuell den verwendeten Fotos anpassen. Achtet lediglich darauf, dass alle querformatigen und alle hochformatigen Bilder jeweils das gleiche Format haben. Davon abhängig ist dann die Größe von #album sowie die entsprechenden Positionierungsangaben der Bilder in den Klassen "quer" und "hoch". Die Rahmenbreite der hochformatigen Bilder hängt von der Bildbreite in Relation zur Albumbox ab.

Galerie mit Thumbnail-Vorschau

Besucher Christian Brückner hat diese Anleitung noch verfeinert, indem er anstelle der laufenden Bild-Nummern sogenannte "Thumbnail-Images", also kleine Vorschaubilder eingebunden hat. Anstelle von

<li>
<a href="#">01<img class="quer" src="handball01.jpg" alt="bild1"></a>
</li>

fügt er ein kleines Vorschaubild mit

<li>
<a href="#"><img class="small" src="handball01small.jpg" alt="bild1">
<img class="quer" src="handball01.jpg" alt="bild1"></a>
</li>

ein. Die Klasse "small" wurde definiert mit

.gallery li img.small {
border:1px solid #000;
visibility: visible;
}

Hinweis:
Das CSS-Fotoalbum funktioniert nicht mit älteren Operaversionen und Safari, da diese Browser den active- und focus-Zustand nur als temporären Status kennen. Zur Anzeige der einzelnen Bilder ist es in diesen Browsern erforderlich, die linke Maustaste gedrückt zu halten.

nach oben