Website-galery :: script, voorbeeld & beschrijving

Klik om de afbeeldingen te vergroten

Beschrijving

Van elke grote afbeelding (bv. big1.png) is als thumbnail een mini-versie van 75x51px (of: 51x75px voor staande afbeeldingen) gemaakt (bv. mini1.png).

Alle gewone inhoud van deze pagina, met de mini's, zit in een container <div id="everything">...</div>.

Los hiervan is er nog één container in de body: de <div id="bigBox">...</div>.

De #bigBox is leeg in de html, en wordt dynamisch gevuld met javascript als op een kleine afbeelding geklikt wordt.

css

De dia-raampjes (liggend en staand) en het projectiescherm bij hoveren zitten in één background-img (dia-bg105x105x3.gif), dat met css bediend wordt.
Voor de achtergrond van de grote afbeeldingen is hier een ander background-img gebruikt, maar dat hoeft niet (of er kan bij de grote afbeeldingen ook gekozen worden voor een andere achtergrondkleur).
Het gebruikte stylesheet is small-to-big.css, en maar 2.5kB groot (inclusief de rest van de pagina-opmaak).

javascript

Als javascript uit staat, wordt de grote afbeelding weergegeven op een nieuwe pagina.

Als javascript aan staat, wordt #everything onzichtbaar gemaakt met { display: none; }, en de #bigBox zichtbaar gemaakt met { display: block; }.

Tegelijkertijd wordt bij de klik op de kleine afbeelding de grote afbeelding gedownload in de #bigBox, met een mechaniekje om makkelijk terug te klikken en weer op dezelfde hoogte van de kleine afbeelding uit te komen.

• De grote afbeeldingen worden automatisch (zo groot mogelijk) passend gemaakt voor de beeldscherm-resolutie en het window-formaat van de bezoeker. Dit schalen door de browser geeft geen optimale scherpte. Door wijziging van de css kan desgewenst ook het ware formaat van de grote afbeelding getoond worden.
• De grote afbeeldingen worden dus pas gedownload als ze nodig zijn, terwijl steeds op dezelfde pagina gebleven wordt. Hierdoor is de pagina met de kleine afbeeldingen rap op het scherm, en kan ook bijzonder snel geschakeld worden tussen klein en groot.
• Ontbreekt een grote (of kleine) afbeelding, dan wordt de bezoeker gewaarschuwd. De webbouwer ook: de pagina is tevens zijn eigen testpagina.

Het gebruikte javascript is small-to-big.js, en maar 4.5kB groot.
Dit zorgt er o.a. ook voor dat een onclick eigenschap aan de kleine afbeeldingen wordt vastgemaakt om de grote afbeeldingen op te roepen. Dat is in de html minder tikwerk!

html

Er kan nu voor de plaatjesgalerij steeds volstaan worden met het aangeven van waar de grote en kleine afbeeldingen zich bevinden:

<div id="galery">
   <a href="images/big1.jpg"><img src="images/mini1.png" alt=""></a>
   <a href="images/big2.jpg"><img src="images/mini2.png" alt=""></a>
   <a href="images/big3.jpg"><img src="images/mini3.png" alt=""></a>
   ... enz.
</div>

De afbeeldingen hoeven niet in dezelfde map te zitten, en mogen ook andere namen hebben (eigen namen in plaats van de abstracte nummeraanduidingen). Ze hoeven ook niet steeds van dezelfde soort te zijn (jpg's, gif's en png's kunnen door elkaar gebruikt worden).
Voor staande afbeeldingen moet (in de hier gebruikte dia-opmaak) alleen een class toegevoegd worden:

   <a class="staand" href="images/big6.png"><img src="images/mini6.png" alt=""></a>

De gebruikte html staat in de broncode van deze pagina (of hier). Er is alleen php gebruikt om er een php-header aan toe te voegen voor de karakterset (is wenselijk, maar niet noodzakelijk; zie hier).

verdere toelichting

Verdere toelichting is te vinden in de commentaarregels in de broncode van de html, css en het javascript.

evaluatie

De code is valid html en valid css.

De pagina komt ook met een score 47/47 door de automatisch toetsbare richtlijnen van de Quickscan Kwaliteitsmodel Webrichtlijnen. Het javascript is zogenaamd 'unobtrusive javascript' (niet-in-de-weg-staand javascript, zie hier voor uitleg).

• Getest en akkoord in de "echte browsers" die de standaarden volgen: Firefox, Opera, Safari, Chrome.
• De Internet Explorers (IE6, IE7, IE8) doen het ook.
  Daarvoor was nodig om een onclick eigenschap aan de kleine afbeeldingen toe te voegen. Voor andere browsers kan het ook met een addEventListener op de link zelf, die hier dus niet toegepast is.
• In Internet Explorer 6 komen de grote afbeeldingen wel groot op het scherm, maar worden niet altijd beeldvullend.