Billedvisning med Lightbox

Når vi først er kommet til den billedvisningsmodel, jeg har vist i de foregående eksempler, er det fristende at tilføje noget “Eye Candy” i form af overblændingseffekter fra det ene billede til det andet.

Microsoft tilbyder en frygtelig masse af den slags gennem anvendelsen af den IE-specifikke filter-egenskab.

Hvis vi skal lave noget, som fungerer i alle browsere, er vi nødt til at forbigå disse.

På denne side præsenterer jeg en “Eye Candy”, der beror på Lokesh Dhakars Lightbox 2 JavaScript.

Lightbox

Dette script har, i de få år det har eksisteret, opnået stor popularitet. Det er let at sætte op til både single-billedvisning og til at vise billederne efter hinanden – som et slideshow.

Der er nogle få faldgruber, som primært har at gøre med at man skal huske at få indsat de korrekte stier til de billeder, der tegner de forskellige effekter oven på billedet.

Det er med hensyn til det visuelle design en fordel, at det store billede ikke optager plads på siden, men indlæses i et positioneret lag oven på tekstsiden, der så først er tilgængeligt, når billedet er lukket.

HTML-kode

HTML-koden til denne side er ganske mage til de øvrige eksempler, det vil sige småbillederne vises i rækker, der bliver så lange som bredden af siden tillader. Hvert enkelt småbillede er indsat med følgende kode:

<li>
<a rel="lightbox[asia]" 
href="/galleri/eksempler/asia/asia1.jpg" 
title="På rejse i Asien - Hong Kong Harbour">
<img src="asia/asia1small.jpg" width="97" height="65" 
alt="På rejse i Asien" /></a>
</li>

Det, der er vigtigt her er:

  1. rel-atributten, der for visningen af enkeltbilleder blot skal være rel="lightbox" og for en billedserie yderligere skal være forsynet med et navn på serien, her asia, i firkantet parentes.
  2. title-attributten, der vises som billedtekst under det større billede.

Bemærk at billedvisningen er tilgængelig for tastaturnavigation – TAB frem til et billede, tast Enter og naviger derefter gennem billederne med pil-til-højre og pil-til-venstre.