Foto-album in JavaScript
Bij belangrijke gebeurtenissen zoals een huwelijk of de geboorte van een baby, is het leuk om de foto's te publiceren op een web-pagina. Om dat voor elkaar te krijgen is veel -ook gratis- software beschikbaar op internet, bijvoorbeeld Webalbum Generator.
Op deze bladzijde wordt een dergelijk foto-album besproken, dat helemaal is geschreven in JavaScript. Ik heb het zelf ontwikkeld. Het is heel geschikt om in te bouwen in je eigen website.
Als je op het boekje hiernaast klikt, verschijnt een
voorbeeld van het album.
Op deze pagina wordt beschreven hier je een en ander toepast op je eigen website. De code staat onderaan
deze bladzijde. Je kunt hem ook downloaden voor je eigen gebruik.
De foto's zijn afkomstig uit externe bronnen (ik heb ze dus niet zelf gemaakt) en kunnen dus onder
copyright staan. Ze staan daarom niet in de downloadfile.
- De code staat in de file bb_album.htm. Je moet file aanpassen voor je eigen gebruik. Behalve deze file is er ook nog bb_album.gif. Deze wordt op het scherm getoond tijdens het laden van de albumfoto's.
- De aanpassingen betreffen het <style>-block en het JavaScript, zoals hieronder is aangegeven.
- In het <style>-block kunnen de volgende attributen worden aangepast:
- color
- font-family
- font-size
- font-weight
- text-decoration
- In het <style>-block mogen de volgende zaken NIET worden gewijzigd:
- De namen van de classes en ID's moeten onveranderd blijven.
- Er mogen geen classes en ID's worden verwijderd.
- Het attribuut display: .
- Wijziging van de attributen cursor en text-align wordt niet aanbevolen.
- In het JavaScript moeten de volgende zaken worden aangepast:
- De variabele AlbumTitel. Deze bevat de naam van het foto-album. Deze wordt op het scherm getoond en tevens in de titelbalk van het window gezet. De <title>-tag in de <head> kan dus ongewijzigd blijven!
- De variabele AlbumDatum. Deze bevat de datum waarop het foto-album is gemaakt.
- De array Fotos. Hier geef je de foto's op die je in het album wilt zetten. Hierbij geldt:
- De eerste foto heeft index 0, de tweede heeft index 1, enz.
- De nummering moet opeenvolgend zijn. Er mogen geen gaten in zitten.
- Geef de foto's op in de volgorde waarin je ze wilt laten zien.
- Alle bestandsformaten waar de browser mee overweg kan zijn toegestaan: .JPG, .PNG, .GIF (ook Animated GIF), enz.
- De array Tekst. Hier geef je voor elke foto het onderschrijft op:
- Bij elke foto moet een onderschrift worden gegeven.
- Als je geen onderschrift wilt gebruik je een lege string.
- Verder kunnen worden aangepast:
- De achtergrondkleur van de Aan-Uit knop voor de albumtitel.
- De borderkleuren van de Aan-Uit knop voor de albumtitel.
- Het hele album is geschreven in JavaScript. Het wordt volldig opgebouwd en bestuurd door code die in de <HEAD> staat. De <BODY> van het foto-album daarom moet leeg blijven.
- Als het document volledig is geladen wordt het geactiveerd met behulp van de event-handler onload="Init()".
- Als de grootte van het window wordt veranderd wordt het album opnieuw gestart. Dat gebeurt met behulp van de event-handler onresize="Init()".
- Tijdens het downloaden van het album naar de browser worden gelijk alle foto's opgehaald. Bij grote albums met veel foto's kan het even duren voordat het hele album beschikbaar is. Dit wordt overigens op het scherm gemeld.
- Foto's die niet op het beschikbare deel van het beeldscherm passen worden verkleind. Daarbij wordt eerst gekeken naar
de breedte van de foto. Als de foto na de verkleining nog te hoog is voor het beschikbare deel van het scherm dan wordt de
foto in een tweede stap nog verder verkleind tot deze wel past.
Foto's worden nooit vergroot weergegeven. - Open het foto-album bij voorkeur in een eigen window. Het kan echter zonder bezwaar in een frame worden geplaatst.
Gebruik:
- De code staat in de <BODY>, op de plaats waar je hem nodig hebt.
De code ziet er als volgt uit:
(Zet dit in de <BODY>).
<a href="bb_album.htm" target="_blank">Open het fotoabum!</a>
Downloaden:
Druk op de knop:
File: voorb147.zip, 4665 bytes.
