Fotoshow
Slimme CSS-trucs

Deze website heeft een experimentele fotoshow met een muis-overeffect waarover ik nogal tevreden ben.

Er zitten een aantal slimme HTML-trucjes in, waardoor er geen gebruik hoeft te worden gemaakt van Javascript, en de code heel overzichtelijk en eenvoudig blijft — in vergelijking tenminste tot de gebruikelijke oplossingen.

Mijn fotoshow is uitsluitend gebaseerd op CSS3 (Cascading Style Sheets) volgens de W3C-standaard. Oudere browsers (gebruikt door minder dan 1,5% van de internetsurfers) zullen er waarschijnlijk niet veel van bakken. Pech gehad, zeg ik dan.

Truc 1

De grote foto’s en de ‘thumbnails’ zijn gecombineerd in één jpg-afbeelding. Dat ziet eruit zoals hiernaast. De thumbnail is boven de grote foto geplakt. Hier heb ik het in twee varianten gedaan: zwartwit en kleur. Ik gebruik alleen de gekleurde.

Aan deze truc zitten drie voordelen.

1. Het aantal jpg-bestanden is de helft van wat normaal nodig is. Er zijn immers geen afzonderlijke bestanden voor de thumbnails en de grote foto‘s.
2. Thumbnails en foto’s kunnen niet verward raken.
3. Het belangrijkste: als de thumbnails geladen zijn, zijn de grote foto’s dat ook. Er zijn geen speciale Javascript-functies nodig om die te ‘preloaden’ zodat ze onmiddellijk beschikbaar zijn als dat nodig is.

Truc 2

Het muiseffect is helemaal vastgelegd in CSS-stijlregels. Er wordt gebruik gemaakt van het standaard hover-effect voor <li>-tags. Er zijn daarom dus ook geen Javascript mouseover- en mouseout-handlers nodig.

De thumbnails zijn in feite items in een gewone, ongeordende lijst (<ul>). In de bijbehorende li:hover stijlregel zitten listige CSS positioneringsregels vervlochten die ervoor zorgen dat het hover-effect niet bij de thumbnail optreedt, maar bij de grote foto.

Truc 3

De gecombineerde foto met thumbnail wordt ingezet als achtergrondafbeelding. Omdat er niets bovenop staat, is er op het oog geen verschil met een gewone afbeelding.

De lijst-items bestaan eigenlijk uit niets anders dan de tekst van het onderschrift. Daaraan is de jpg als achtergrondafbeelding toegevoegd. De CSS stijlregels zorgen ervoor dat het juiste deel van de juiste achtergrondafbeelding wordt vertoond. De grote foto staat in de ‘padding-top’ van het bijschrift. Die is niet, zoals gebruikelijk, een paar pixels hoog, maar zo groot dat de foto er helemaal in past.

De hele fotoshow is niets meer dan een ongeordende lijst (<ul>). In HTML ziet dat er ongeveer zo uit:

<div class="fotoshow">
    ...
    <ul>
        <li style="background-image: url(foto1.jpg);">
            <span>Bijschrift 1</span>
        <li style="background-image: url(foto2.jpg);">
            <span>Bijschrift 2</span>
        ...
    </ul>
</div>

De lijst is ingebed in een div met de class "fotoshow". Het enige bijzondere is dat de tekst van iedere link door een <span> tag wordt omsloten.

In het CSS zitten onder andere de volgende stijlregels:

.fotoshow   {
    position: relative; }
.fotoshow span {
    background-image: inherit;
    background-position: 0 -24px;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    right: 0; }
.fotoshow li:hover span {
    opacity: 1; }

De <div> .fotoshow is relatief gepositioneerd en dient daarmee als ankerpunt voor ingebedde tags.

De <span> krijgt dankzij inherit dezelfde achtergrondafbeelding als de omliggende <li> (Truc 3a) en wordt als blok weergegeven in de rechterbovenhoek van <div> .fotoshow (Truc 3b). De positie van de achtergrondafbeelding wordt zo ingesteld dat alleen de grote foto zichtbaar is (Truc 3c). De <span> is normaal gesproken verborgen (Truc 3d).

Als over de <li> (de thumbnail dus) wordt gehoverd, wordt de <span> zichtbaar gemaakt. Om het nog mooier te maken wordt de opacity geleidelijk veranderd met behulp van een CSS-transition. Et voilà: een puur op CSS gebaseerde fotoshow.

Je eigen fotoshow

Wie ook met mijn fotoshow aan de slag wil is hierbij van harte uitgenodigd. Er valt vast nog wel iets aan te verbeteren.

Hier staat het volledige CSS-bestand (fotoshow.css).

Volg verder de aanwijzingen hieronder. Wees terughoudend met het toekennen van margin’s en padding’s. Ik houd me aanbevolen voor op- en aanmerkingen.

Gebruiksaanwijzing

• Maak een ongeordende lijst (<ul>) met de bijschriften onder de grote foto.
• Zorg dat de bijschriften omsloten worden door <span>. De list-items zien er dan zo uit: <li><span>Bijschrift</span></li>
• Zet de combi-afbeelding van foto met thumbnail op als achtergrond van de link. Dat kan bijvoorbeeld zo: <li style="background-image: url(combifoto.jpg);"><span>Bijschrift</span></li>
• Omspan de <ul> door een <div> met class="fotoshow".
• Zorg ervoor dat er in fotoshow.css iets zinnigs staat bij de background-image en de content van .fotoshow ul:before (de afbeelding en het bijschrift dus die vertoond wordt als er niet boven de thumbnails wordt gehoverd).
• Zorg dat de stijlregels voor de class fotoshow geladen zijn (neem ze op in de pagina of link naar een "fotoshow.css") en pas ze aan volgens de tabel.