Menu
Een stap-voor-stap beschrijving voor wie thumbnails maken wil
In het blokje hieronder staan zes thumbnails: kleine afbeeldingen die – wanneer je erop klikt – in een wat groter formaat worden vertoond. Op deze pagina leg ik je stap voor stap uit hoe je zoiets maakt.
 |
 |
 |
 |
 |
 |
- Je begint met de grote foto's die je wilt laten zien als er op een van de kleine foto's wordt geklikt.
Zijn dat foto's die je zelf hebt gemaakt bijvoorbeeld, dan zijn ze te groot om zomaar op je website te plaatsen.
Het eerste wat je daarom moet doen, is deze foto's verkleinen tot een geschikt formaat.
In het voorbeeld heb ik alle foto's verkleind tot ze een afmeting hadden van 600 pixels bij 450 pixels. Ook heb ik de resolutie van elke foto ingesteld op 72 dpi. En verder kun je elke foto nog comprimeren. Bij de grote foto's uit het voorbeeld hierboven was dat trouwens niet meer nodig, want ze waren na verkleining geen van alle groter dan 260 kB. (Alle foto's in dit voorbeeld zijn afkomstig van openphoto.net.) - Het volgende wat je doet, is thumbnails maken van de grote foto's.
Een thumbnail is niets anders dan een kleine versie van dezelfde foto. Mijn grote foto's zijn zoals gezegd 600 pixels breed bij
450 pixels hoog (of andersom als het een portrait foto is).
De kleine versies van deze foto's heb ik een formaat gegeven van 100 pixels breed bij 75 pixels hoog.
Deze kleine versies sla je op onder een iets andere naam. Bijvoorbeeld: een van mijn grote foto's heet blauwe-zeilen.jpg en de thumbnail van die foto heet tn-blauwe-zeilen.jpg
Al deze foto's (dus thumbnails en grote versies) upload je naar (een map op) je server. - Nu moeten de kleine foto's netjes worden gerangschikt.
Ik heb daarvoor een tabel gebruikt. Mijn tabel uit het voorbeeld hierboven bestaat uit twee rijen en drie kolommen.
De tussenruimte (cellspacing) tussen de cellen is 6 pixels. De basiscode voor zo'n tabel is de volgende:
<table cellspacing="6px">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- De vormgeving van de tabelcellen (een cel begint met de code <td>
en eindigt met de code </td>) kun je ook alvast vastleggen.
De cellen uit het voorbeeld zijn allemaal even groot (100 pixels breed en 100 pixels hoog),
hebben een dunne, donkergrijze rand en een lichtgrijze achtergrond.
En de foto's staan netjes in het midden van deze cellen.
Dat is op de volgende manier vastgelegd:
<td style="width: 100px; height: 100px; border: 1px solid grey; background-color: lightgrey; text-align: center;"></td> - In elke cel
zet je de afbeeldingscode voor een thumbnail. In deze code geef je ook alvast aan dat je straks (als je een link van deze thumbnail heb gemaakt)
niet wilt dat er een blauw lijntje omheen komt te staan (dat doen de browsers standaard uit zichzelf). De code van de eerste cel ziet er nu zo uit:
<td style="width: 100px; height: 100px; border: 1px solid grey; background-color: lightgrey; text-align: center;"><img src="http://www.mijn-eigen-website.nl/images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen" width="100px" height="75px" border="0" /></td>
Op dezelfde manier zet je in alle cellen van je tabel een code neer voor de thumbnail-versie van een van je foto's. - Van elke thumbnail-foto maak je een link naar de grote versie van dezelfde foto.
Dat doe je door de code van je foto tussen de html-codes voor een link (<a href=""> en </a>) te zetten en deze link te laten verwijzen naar de grote versie van je foto. De code van de eerste tabelcel wordt dan:
<td style="width: 100px; height: 100px; border: 1px solid grey; background-color: lightgrey; text-align: center;"><a href="http://www.mijn-eigen-website.nl/images/blauwe-zeilen.jpg"><img src="http://www.mijn-eigen-website.nl/images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen" width="100px" height="75px" border="0" /></a></td>
Ook dit doe je weer op dezelfde manier voor alle cellen en foto's. -
De basis van je thumbnail-galerij is hiermee klaar. Maar als je je pagina in een browser opent en je klikt op een van de thumbnails,
dan verschijnt de grote versie van je foto gewoon in hetzelfde browservenster. Om een mooi pop-up-venster te maken dat je
weer kunt wegklikken, zoals in het voorbeeld bovenaan, heb je een script nodig. Het script dat ik heb gebruikt is
Image Thumbnail Viewer van DynamicDrive.com.
Je klikt op de pagina van deze viewer eerst op de knop met de tekst 'Select All' onder de tekst 'Step 1'. De tekst in het bovenste vak wordt nu geselecteerd. Je klikt er met je rechtermuisknop op, kiest voor 'Kopiëren', en dan plak je het gekopieerde stuk in de head van je html-pagina (bijvoorbeeld vlak vóór de code </head>). -
Dan download je drie bestanden (thumbnailviewer.css, thumbnailviewer.js en loading.gif) door met je rechtermuisknop op de links te klikken
en te kiezen voor 'Doel opslaan als...'. Je bewaart deze bestanden in dezelfde map als die waarin zich ook de html-pagina bevindt waarop de
thumbnails moeten komen.
Als je wilt, kun je nog iets aan de eerste twee bestanden veranderen. Ik heb zelf bijvoorbeeld in het bestand thumbnailviewer.js het woord CLOSE X (in de regel die begint met: definefooter: '<div class="footerbar">CLOSE X</div>') veranderd in: Sluiten X.
En in het bestand thumbnailviewer.css heb ik de lettergrootte in het blokje #thumbBox .footerbar verkleind van 16px Tahoma naar 14px Tahoma. Ook heb ik in het blokje #thumbLoading een regel toegevoegd om invloed te hebben op de lettergrootte van de tekst die verschijnt als een foto een lange laadtijd nodig heeft. Onderaan dit blokje (#thumbLoading dus) heb ik nog de volgende regel toegevoegd: font: bold 11px Tahoma;. - Nu moet je nog één ding doen, en dat is aan de link van je thumbnail naar de grote foto
de code rel="thumbnail" toevoegen. Dus zo ziet mijn eerste cel er nu uit:
<td style="width: 100px; height: 100px; border: 1px solid grey; background-color: lightgrey; text-align: center;"><a href="http://www.mijn-eigen-website.nl/images/blauwe-zeilen.jpg" rel="thumbnail"><img src="http://www.mijn-eigen-website.nl/images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen" width="100px" height="75px" border="0" /></a></td> - En ten slotte moet je natuurlijk alles uploaden naar je server.