Opdracht 1: Simple Lightbox

Achtergrond

Het idee van een lightbox is simpel. Je hebt op een pagina een verzameling met thumbnails van plaatjes. Als op een van de thumbnail wordt geklikt, wordt een grotere versie van het plaatje getoond in het midden van het scherm en wordt de achtergrond donkerder. Er zijn er vele op internet lightbox scripts down te loaden, maar deze maken bebruik van diverse complexe technieken. Met de technieken die je in deze module geleerd hebt kun je ook zelf een eenvoudige lightbox maken.

Opdracht

Maak zelf met goede en begrijpelijke technieken zo'n LightBox. Documenteer je code.

aandachtspunten:

• Maak eerst een XHTML pagina met de thumbnails erop. Een thumbnail is een mini-plaatje dat een eerste indruk geeft van het bijbehorende plaatje. Op de pagina worden veel thumbnails getoond; de thumbnail moet dus snel laden (bijv. 100 x 100 px, 5 kb). Iedere thumbnail is (ook zonder JavaScript) een knop/link naar een grotere versie van het plaatje (bijv. 50 kb).
• Als je op een thumbnail klikt moeten er (met JavaScript) een paar dingen gebeuren:
  1. De bestaande bladzijde moet blijven, maar het zou goed zijn als deze visueel wat op de achtergrond raakt. Vaak lijkt het alsof de achtergrond donkerder wordt. Hoe zou je dat doen? Er zijn verschillende manieren en hierin zit het meeste uitzoekwerk.Beschrijf dat ook in je opleverdocument.
  2. Er moet bovenop de bestaande bladzijde als in een nieuwe laag de nieuwe grotere versie van de afbeelding worden geladen.
  3. Er moet worden voorkomen dat de link een nieuwe pagina laadt. De pagina wordt dus niet opnieuw opgebouwd; er wordt alleen iets aan toegevoegd.
• Als de lightbox zichtbaar is en er wordt geklikt op de grote afbeelding (of op de achtergrond), dan moet de extra laag weer verdwijnen en de achtergrond weer voorgrond worden.

Inleveren

Als je meerdere dingen geprobeerd hebt, vooral als dingen niet gelukt zijn zoals je wilde, kun je meerdere (oudere) versies inleveren in aparte sub-directories (mappen). Schrijf bovendien ook een opleverdocument. Hierin maak je jouw werk en werkwijze voor de docent inzichtelijk, zodat deze het beter kan beoordelen. In dit opleverdocument schrijf je:

• Wat je aan zelfstudie hebt gedaan om de leerdoelen te behalen,
• Hoeveel tijd je hieraan gespendeerd hebt,
• Hoeveel tijd je hebt besteed aan het maken van de opdracht,
• Hoe je de opdracht hebt aangepakt
• Welke problemen je hierbij bent tegengekomen, hoe je die hebt proberen op te lossen en in hoeverre dat gelukt is

Opdrachten moeten worden upgeload naar je webspace op ftp://student.cmd.hro.nl/public.www . Je werk moet steeds te vinden zijn op de locatie die hoort bij de opdracht: http://student.cmd.hro.nl/[studentnummer]/jaar1/winter/fed/opdracht1/ . Op deze locatie moet ook je opleverdocument te vinden zijn. Schrijf je opleverdocument in correcte XHTML en link daarin naar je werkende applicatie en naar de broncode.

Houd rekening met de deadline voor deze opdracht: zondagavond 14 december om 24:00. Zie voor meer informatie de modulewijzer.

Beoordelingscriteria

• Je hebt hebt zinvol gebruik gemaakt van de bouwstenen van programmeertalen als JavaScript: Objecten, variabelen en functies
• Je hebt DOM Core methodes gebruikt om het juiste XHTML element op te halen en de attributen ervan aan te passen
• Je JavaScript code is overzichtelijk (inspringen) en van zinvol commentaar voorzien
• Je werk is goed gedocumenteerd en correct ingeleverd (zie 3.1.4 en 3.1.5 in de modulewijzer)
• Je voldoet aan de algemene beoordelingscriteria (zie 3.2 in de modulewijzer)

Succes.