Ben's Hobbyhoekje -- Stapeltje Fotos

Stapeltje Foto's

Foto-albums op internet zijn meestal heel groot, in de zin dat het album het hele window nodig heeft voor weergave van een foto en eventuele miniaturen (thumbnails).
Voor kleine albums, laten we zeggen tot maximaal 10 foto's, zijn thumbnails niet echt nodig. Dat maakt een wat meer compacte oplossing mogelijk.

Hierboven zie je een stapeltje van 10 foto's. De bovenste foto is zichtbaar, de andere foto's liggen er onder.
Als je op de bovenste foto klikt verhuist die naar onderop de stapel. Als je op de rand van een foto in de stapel klikt komt die foto bovenop de stapel te liggen.

Op deze pagina wordt beschreven hoe je dit op je eigen website kunt zetten. De code staat onderaan deze bladzijde. Je kunt hem downloaden om zelf te gebruiken, inclusief de plaatjes.

Er worden twee items besproken:
1. Inbouwen in je site.
2. Globale werking van het script.
De code bestaat uit een stuk JavaScript, in de file photostack.js. Deze moet je veranderen om hem te gebruiken.
Het album wordt in je pagina opgenomen door aanroep van de JavaScript function BuildPhotoStack(), op de plaats waar dat nodig is. De uitlijning op het scherm (links, rechts, midden) wordt niet door het script gedaan. Dat kun je zelf regelen, bijvoorbeeld met <div align="center"> of met een <table>.

De volgende zaken moeten worden veranderd in de file photostack.js:

Naam		Betekenis
PicturesOnStack		Bestandsnamen van de foto's. De lijst moet beginnen met volgnummer 0. De nummering moet aaneengesloten zijn. Hier: stapeltje_0.jpg, stapeltje_1.jpg, ... stapeltje_9.jpg.
PicturesLocation		Path-verwijzing naar de plaatjes, relatief t.o.v. de HTML-code dat het script aanroept. Geef een lege string als de plaatjes en de HTML-code in de zelfde directory staan. Op deze bladzijde: ../images/. Merk op dat de laatste / erbij hoort! In de downloadfile is PicturesLocation leeg.
PicturesWidth		Breedte van de foto's, in pixels. Hier: 250.
PicturesHeight		Hoogte van de foto's, in pixels. Hier: 187.
BorderWidth		Breedte van de rand om de foto's, in pixels. Hier: 2.
BorderColor		Kleur van de rand om de foto's. Standaard kleurnaam of hexadecimale code. Hier: #fafafa (heel licht grijs). Zie het item "Kleurcodes voor tekst, links en achtergrond" voor meer informatie over kleuren.
HorizontalShift		Verschuiving van de foto's ten opzichte van elkaar in horizontale richting, in pixels. Hier: 10. Zie ook de opmerkingen verder op deze bladzijde.
VerticalShift		Verschuiving van de foto's ten opzichte van elkaar in verticale richting, in pixels. Hier: 5. Zie ook de opmerkingen verder op deze bladzijde.

Opmerking: De toevoeging "px" moet worden weggelaten. Waar nodig voegt het script ze zelf toe.
Opmerking: Alle plaatjes moeten dezelfde afmetingen hebben!

De stapel foto's lijkt "schuin" te liggen. Door de waarde van HorizontalShift en VerticalShift te veranderen kun je vorm van de stapel (de schuinte) veranderen.
De getallen mogen ook nul of negatief zijn, zie hier onder:

HorizontalShift
< 0 HorizontalShift
= 0 HorizontalShift
> 0
VerticalShift
< 0
VerticalShift
= 0
VerticalShift
> 0

Opmerking: Als HorizontalShift en VerticalShift allebei gelijk zijn aan nul krijg je een "rechte" stapel. Je kunt in dit geval dus geen foto's overslaan, omdat je niet op de rand kunt klikken.
Opmerking: Maak HorizontalShift en VerticalShift niet te groot en ook niet te klein. Waarden lager dan 3(px) maken de stapel moeilijk aanklikbaar. Waarden groter dan 20(px) geven een lelijk resultaat.
De werking van het script is ongeveer als volgt:
- Voor elke foto op de stapel wordt, in de volgorde van de array PicturesOnStack, een Image-object aangemaakt. De attributen src en alt worden ingevuld. Voor alt wordt de bestandsnaam van de foto genomen.
- Bij het aanmaken van de image-objecten worden de alt-attributen ook nog apart opgeslagen in de array Alts. Deze array wordt samen met PicturesOnStack gebruikt als hulpvariabele.
- De function BuildPhotoStack(), die het stapeltje foto's zichtbaar maakt, berekent eerst de ruimte die nodig is op het scherm en reserveert die met behulp van een <DIV>-tag. Deze dient als container voor het stapeltje foto's.
- Vervolgens wordt de plaats van elke foto apart berekend en zichtbaar gemaakt, elke binnen een eigen <div>-tag. Er wordt onderaan de stapel begonnen. De eerste foto in PicturesOnStack wordt dus als laatste op het scherm gezet. Op deze manier ontstaat een stapel in de juiste volgorde.
  Elk van deze <div>-tags heeft een onclick-attribuut, waarmee kan worden vastgesteld of er op is geklikt.
- Elke <img>-tag heeft een uniek id, dat wordt gebruikt voor het verwisselen van de foto's.
- Als er op de bovenste foto wordt geklikt worden alle foto's één plaats omhoog geschoven. De bovenste foto wordt naar onderop de stapel verplaatst.
- Als er op een foto in de stapel wordt geklikt wordt deze bovenop de stapel gelegd. De foto's die er onder liggen gaan mee omhoog. De foto's die erboven liggen worden onderop gelegd. De volgorde van de foto's verandert dus niet!