Elke webbouwer kreeg ongetwijfeld al eens de vraag of drang om een slideshow te voorzien. Daar dit in de meeste gevallen een relatief kleine, echter alomtegenwoordige feature is, kan al snel even gegoogled worden naar een kant en klaar stukje Javascript. In de bijna 10 miljoen resultaten zal je echter nooit dat script vinden dat exact doet wat je verwacht, op de manier waarop je het wenst.
Omdat we bij Netlash graag volledige controle hebben over onze software, schreven we dan ook zelf een kleine JQuery plugin die heel eenvoudig aan onze meeste noden voldoet. Omdat we het web ook elke dag een beetje beter proberen te maken, delen we deze uiteraard.
Demo
Hoe installeer je het script?
- Download JQuery op jquery.com en include deze in je document:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> - Download deze plugin en include deze in je document, na het includen van JQuery:
<script type="text/javascript" src="/path/to/downloaded/jquery.slideshow.js"></script>
Hoe gebruikt je het script?
- Plaats een image op de plaats waar je de slideshow wenst te tonen:
<img src="/path/to/1st/image.jpg" class="slideshow" />
de class die ik hier op plaatste dient om deze makkelijk te kunnen selecteren via JQuery - Geef in het rel-attribuut van je image alle paden van de files mee, comma-seperated:
<img class="slideshow" rel="/path/to/1st/image.jpg,/path/to/2nd/image.jpg,/path/to/last/image.jpg" src="/path/to/1st/image.jpg" /> - Inititiëer de slideshow:
<script type="text/javascript"> $('.slideshow').slideshow();</script>
Meer?
Omdat we graag voorzien zijn op "ietsje meer", kan via enkele extra parameters je slideshow wat aangepast/uitgebreid worden.
Beschikbare parameters zijn:
- images, als array: geef de paths van je afbeeldingen op als parameter in plaats van als rel-attribuut in de HTML.
- links, als array: de mogelijkheid om aan elke afbeelding en link te koppelen waarnaar bij een klik wordt genavigeerd.
- fadeTime: de tijd (in milliseconden) tussen het in/uit-faden van de afbeeldingen.
- fadeSpeed: de tijd (in milliseconden) dat de fade-animatie duurt.
- hookPrevious: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in omgekeerde volgorde (vorige).
- hookNext: de JQuery selector die hier wordt doorgegeven wordt gebruikt voor manuele navigatie doorheen de slideshow in normale volgorde (volgende).
- random: geef aan of de afbeeldingen in de slideshow in willekeurige volgorde dienen verschijnen
- preload: hoeveel images moeten gepreload worden voor de huidige getoonde afbeelding
Voordelen?
- Indien de bezoeker geen Javascript enabled heeft zal nog steeds de standaard-afbeelding zichtbaar zijn.
- De slideshow kan makkelijk gepositioneerd worden zoals gewenst.
- Een eenvoudige slideshow kan snel opgezet worden.
- De code is eenvoudig en makkelijk uitbreidbaar.
- Makkelijk meerdere slideshows op 1 pagina, elk afzonderlijk of samen configureerbaar.
Door Steffest 02/11/09 (3 maanden geleden)
re: Javascript slideshow
Wel vervelend dat je elke afbeelding moet specifiëren in het rel-atribuut, niet?
In mijn zeer bescheiden mening is een slideshowscript pas handig om te herbruiken als het via een serverside scripje bv alle afbeeldingen in een map ophaalt om te tonen - of een xml bestandje inleest met bestandsnamen dat dan door een serverside script wordt gegenereerd. Maar ik weet haast zeker dat jullie inhouse CMS dat ook zo doet zodat je niet handmatig alle bestandsnamen moet gaan oplijsten.