Billedgallerier

Artiklen omhandler metoder til at vise en serie småbilleder (thumbnails), hvor brugeren kan vælge at vise en større udgave af det samme billede.

Den konventionelle måde at ordne det på er ved at åbne billedet i et nyt browservindue. En mere moderne metode går ud på at åbne det større billede på samme side.

Det klassiske billedgalleri

Et sådant finder du i eksemplet Birkely, hvis udgangspunkt er præsentationen af et sommerhus. Præsentationen består af 8 småbilleder af husets interiør. Klikkes der på ét af disse, åbnes et nyt vindue med det samme billede i en større udgave.

En konstruktionsopgave af denne karakter omfatter i det mindste 5 forskellige delopgaver:

  1. Sidens opbygning i html
  2. Sidens stylesheet-formatering
  3. Småbilledernes event-handlere
  4. Det script, der skal åbne det nye browservindue
  5. Skabelonsider til de filer, der skal åbnes i de nye browservinduer.

Hvis du vil have alle detaljer omkring netop denne eksempelside, må du bruge browserens Vis-kilde-funktion. JavaScript og CSS-kode er indlejret i eksempelsiden, kun billederne er eksterne i forhold kildekoden. Her gennemgår jeg kun de dele, der er relevante i forhold til siden set som et billedgalleri.

Html-delen

Udgangspunktet for et billedgalleri er altid en serie småbilleder. I det her omtalte eksempel rummes hvert småbillede i en boks:

<div class="smaapix">
<a href="res/bigpix1.html" 
onclick="popWin('res/bigpix1.html',261,400);return false;"
onmouseover="visTekst();return true;"
onmouseout="window.status='';return true;">
<img src="res/hus.jpg" width="120" height="78" 
alt="Klik på billedet for at se en større udgave" /></a>
<br />
<p>Birkely</p></div>

Småbilledet er her en reduceret udgave af det større billede. Jeg kan ikke nok advare imod blot at genbruge det større billede og reducere det ved at sætte en passende mindre width og height på småbilledet. Det øger overførselstiden betragteligt.

Du kan også per rygmarv være fristet til at lave den mindre udgave som en gif-fil, men det vil også oftest være forkert, når det drejer sig om fotos. I dette tilfælde fylder en jpg-udgave af småbilledet typisk kun det halve af en gif-udgave.

Tilgængeligheden kræver, at en webside skal kunne fungere selvom browseren ikke kan fortolke JavaScript. Det udelukker brugen af den gamle <a href="javascript:[funktionskald]">...</a> protokol. I stedet anbefales brugen af onclick event-handleren, som her.

onclick event-handleren kalder funktionen med en url til en html-fil, der indeholder det større billede, samt en højde og bredde på denne side. Denne funktion ser i sin helhed således ud:

<script type="text/javascript">
function popWin(url,h,w) { 
  leftPos = null, topPos = null; 
  if (screen.width){ 
    leftPos = Math.round((screen.width-w)/2)+"px"; 
    topPos = Math.round((screen.height-h)/2)+"px"; 
  } 
  else {
    leftPos = 50+"px" 
    topPos = 50 +"px"
  } 
  popupWin = window.open(url, 'sommerhus', 
  'height=' + h + ',width=' + w + ',top=' 
  + topPos + ',left=' + leftPos + '');
  popupWin.focus();
}
function visTekst(){
  window.status='Klik på et billede for at 
  -->  se en større udgave'
}
</script>

De to variable leftPos og topPos sættes til ingenting. Derefter testes for, om browseren kender egenskaben (window.)screen.width, hvad vist alle nyere browsere gør. I bekræftende fald positioneres det nye vindue midt på skærmen i forhold til dennes højde og bredde. (Og altså ikke i forhold til browservinduets højde og bredde.)

Hvis ikke objektegenskaben kendes, positioneres vinduet 50 pixel fra skærmens overkant og 50 pixel fra venstre kant.

Dernæst åbnes vinduet med window.open-metoden, der som parametre får:

  1. Url'en til den fil, der skal vises i det nyåbnede vindue;
  2. Et window name, der sikrer, at dersom der klikkes på et nyt småbillede, mens et andet er åbent, erstattes den først åbnede HTML-fil med den nye HTML-fil. Det vil sige vi åbner ikke bevidstløst nye vinduer, hver gang der klikkes på et småbillede.
  3. Det nye vindues højde og bredde – hvilket gør det muligt for os at åbne vinduer med forskellige størrelser og orientering, hvis de større billeder er uens.
  4. En left-positon og en top-position.
  5. Og til sidst bringer vi det nyåbnede vindue i fokus. Hvis ikke vi gør det vil siden med småbilleder – som vi netop har bragt i fokus – dække over vinduet med det store billede.

Don't Do This At Home

Jeg kan ikke nok understrege, at denne metode lave et billedgalleri er højst umoderne.

Denne side er senest opdateret: 30. October, 2009