Mijn-eigen-website.nl

Een stap-voor-stap beschrijving voor wie thumbnails maken wil

Zo maak je thumbnails van foto's die je wilt laten zien in een fotogalerij of pop-up.

Thumbnails zijn verkleinde versies van foto's die je wilt laten zien in een fotogalerij of pop-up. Op deze pagina leg ik je stap voor stap uit hoe je zulke thumbnails maakt. (Elders op deze site leg ik uit hoe je thumbnails opneemt in een fotogalerij of hoe je ze laat openen in een pop-up.)

In het blokje hieronder staan zes thumbnails: kleine afbeeldingen die – wanneer je erop klikt – geopend worden in een nieuw tabblad, waar je ze in een wat groter formaat kunt bekijken.

blauwe zeilen
katrol
touwen
zeezeilen
zeilboot
zeilen
  1. Je uitgangspunt is de serie grote foto's die je wilt laten zien als er op een van de thumbnails wordt geklikt. Zijn dat foto's die je zelf hebt gemaakt, dan zijn ze waarschijnlijk 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.

    De foto's uit het voorbeeld heb ik allemaal 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, zodat elk bestand niet groter is dan 100kB. (Alle foto's in dit voorbeeld zijn trouwens afkomstig van openphoto.net.)

  2. 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).

    Eerst heb ik ze vierkant gemaakt – niet door de image size te veranderen, maar door de canvas size aan te passen. Je kunt dat doen met een fotobewerkingsprogramma als IrfanView, Paint.net of Photoshop Elements. Maak de laagste waarde (voor hoogte of breedte, afhankelijk of het een portrait- of landscape-foto is) gelijk aan de hoogste en zorg dat de extra ruimte die toegevoegd moet worden, gelijkmatig wordt verdeeld. Dus is het een landscape-foto, dan moet er evenveel ruimte boven als onder worden toegevoegd. Je krijgt dan een vierkante afbeelding van (in mijn geval) 600 pixels hoog bij 600 pixels breed.

    Daarna heb ik deze zelfde foto verkleind tot een formaat van 100 x 100 pixels (nu heb ik dus wél de image size veranderd).

    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.

  3. Nu moeten de kleine foto's nog netjes worden gerangschikt. Daarvoor heb ik ze elk tussen een set <div>-tags gezet. Deze div-tags heb ik allemaal dezelfde class gegeven, met de naam 'thumbnail'. Dus: <div class="thubmnail">.

    In de head heb ik in een stijlblok de eigenschappen van dit div-element vastgelegd:

    <style>
    .thumbnail { display: inline-block; margin: 0.2em; }
    </style>

    Je kunt deze eigenschappen ook in je stylesheet zetten, als je deze class op meer pagina's van je website wilt gebruiken. De class zorgt er in ieder geval voor dat de thumbnails niet te strak tegen elkaar aan komen te staan, maar dat er wat ruimte rond elke thumbnail komt. De thumbnails komen door deze code allemaal naast elkaar te staan, net zolang totdat er geen ruimte meer is in de breedte om de volgende thumbnail weer te geven. Die laatste komt dan vanzelf onder de eerste te staan.

    Wil je de thumbnails verdelen over meer en kortere rijen, dan doe je dat door de hele set ook weer tussen een set <div>-tags te zetten, en aan deze <div>-tag een waarde voor max-width te geven. In het bovenstaande voorbeeld staan de thumbnails bijvoorbeeld binnen een <div> met een max-width van 400 pixels. Daarmee komen ze in twee rijen van drie te staan:

    <div style="max-width: 400px;">
  4. Van elke thumbnail-foto maak je vervolgens 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 thumbnail wordt dan:

    <div class="thumbnail">
    <a href="http://www.mijn-eigen-website.nl/images/blauwe-zeilen.jpg" target="_blank">
    <img src="http://www.mijn-eigen-website.nl/images/tn-blauwe-zeilen.jpg" alt="blauwe zeilen" style="width: 100px; height: 100px; border: 1px solid #909090;">
    </a>
    </div>

    De eigenschap border: 1px solid #90990; zorgt ervoor dat er niet automatisch een blauw randje om de thumbnail komt te staan omdat deze nu veranderd is in een link. In plaats daarvan wordt een lichtgrijs (kleurcode: #909090) weergegeven.

Verder met pop-ups of een fotogalerij:
De basis van je thumbnail-galerij is hiermee klaar. Als je je pagina in een browser opent en je klikt op een van de thumbnails, dan verschijnt de grote versie van je foto in een nieuw tabblad. Een andere mogelijkheid is ze in een fotogalerij op te nemen.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid