Een slideshow maken voor je site
Wil je een slideshow (of diavoorstelling) maken voor op je website, dan heb je daarvoor een script (programmaatje) nodig. Voor de slideshow hieronder heb ik gebruikgemaakt van een script met de naam ‘Simple Controls Gallery’. Dit script is gratis verkrijgbaar op de website van Dynamicdrive.com.
Zo installeer je een dergelijke diavoorstelling op je site:
- Zet eerst de afbeeldingen die je wilt laten zien in een aparte map en verklein ze eventueel tot het gewenste formaat.
Om je een idee te geven: het formaat van mijn slideshow is 400 pixels breed bij 268 pixels hoog.
Als je niet weet hoe je een afbeelding verkleinen moet,
lees dan eerst even de uitleg elders op de site.
(Het resultaat wordt het mooiste als al je afbeeldingen dezelfde afmetingen hebben, maar het hoeft niet per se. In mijn voorbeeld is de afbeelding met het Keltische kruis wat smaller, zoals je ziet. Er is daar een zwarte balk aan de onderkant te zien.)
Ga dan naar Simple Controls Gallery
en klik op de gele knop met de tekst 'Select All' (zie afbeelding hiernaast). De tekst in het vak eronder wordt dan blauw.
Klik met je rechter muisknop op het blauwe gedeelte en kies voor: kopiëren.
- Open nu de pagina waarin je je slideshow wilt laten zien en plak de code die je net hebt gekopieerd
in de head van je html-bestand, net vóór de tag </head>.
- In het stuk code wordt verwezen naar een javascript-bestand, en naar vijf afbeeldingen. Ze staan achter de nummers 1 en 2
net onder het codevak. Achter het nummer 1 staat de link naar het javascript-bestand; achter nummer 2 staan de vijf afbeeldingen.
Download dit javascript-bestand en de vijf afbeeldingen naar je eigen pc door erop te klikken met je rechtermuisknop.
Zet ze in dezelfde map als waarin je ook je afbeeldingen hebt opgeslagen.
- Nu zet je de code <div id="simplegallery1"></div> op de plaats in je html-pagina waar
je de voorstelling wilt laten zien.
Het html-bestand sla je tussendoor even op, in dezelfde map als die waarin ook alle andere bestanden (afbeeldingen en scripts)
voor de slideshow zich bevinden.
- Ten slotte moet je nog wat instellingen aanpassen in de code die je bovenaan in je html-bestand had geplakt:
- Achter dimensions voer je de afmeting van je afbeeldingen in,
in mijn geval is dat dus 400 voor de breedte en 268 voor de hoogte
- Achter imagearray geef je de specificaties op van de afbeeldingen die vertoond moeten worden.
In de code zijn vier afbeeldingen opgenomen, maar je kunt ook twee of dertig laten zien, wat je maar wilt.
Let er alleen wel op, dat achter elk vierkant haakje aan het eind van elke regel een komma komt te staan,
behalve bij de laatste afbeelding.
- Tussen de eerste set dubbele aanhalingstekens zet je de naam van je afbeelding.
- Als je wilt dat er een nieuwe pagina wordt geopend als een bezoeker op een bepaalde afbeelding klikt,
vul je de URL van die pagina in tussen de tweede set dubbele aanhalingstekens,
en als je wilt dat deze pagina in een nieuw tabblad wordt geopend, vul je _new in
tussen de derde set aanhalingstekens.
- Tussen de vierde (en laatste set) aanhalingstekens vul je de tekst in
die je wilt laten zien als iemand met zijn muis over een bepaalde afbeelding beweegt.
- Achter de waarde autoplay vul je true in
als je wilt dat de slideshow automatisch begint te lopen als de pagina wordt opgeroepen.
Als je dat niet wilt, verander je true in false.
De bezoeker moet dan op een pijltje klikken om de diavoorstelling te starten.
De waarde '2500' die je op dezelfde regel ziet staan is het aantal milliseconden dat een afbeelding vertoond wordt
en de waarde '2' heeft betrekking op het aantal keren dat de hele serie afbeeldingen vertoond moet worden voordat hij stopt.
- De waarde achter persist bepaalt of de browser moet onthouden welke afbeelding als laatste aan je bezoeker is getoond.
Je kunt deze waarde veranderen van false in true als je wilt.
- Het getal achter fadeduration (500) geeft aan
hoeveel milliseconden de overgang van de ene afbeelding naar de andere moet duren.
- Achter dimensions voer je de afmeting van je afbeeldingen in,
in mijn geval is dat dus 400 voor de breedte en 268 voor de hoogte
- Ben je klaar, dan moet je alleen nog alles uploaden naar je server (zorg ervoor dat alle bestanden voor deze slideshow in dezelfde map staan, ook het html-bestand) en testen of alles werkt.
Als je wilt zien hoe ik deze slideshow heb gemaakt, bekijk dan even de videotutorial slideshow maken.
(NB: in deze videotutorial werk ik nog met een oudere versie van de Simple Controls Gallery, dus op een paar kleine puntjes wijkt hij af van de beschrijving hierboven.)