Met een slideshow maak je je website mooier en dynamischer. Hier leer je hoe je snel een eenvoudig ook zelf een slideshow op je webpagina zet.
Je ziet ze steeds vaker, slideshows, ook wel diashows genoemd. Hiermee kun je op een plek makkelijk meerdere afbeeldingen of wisselende links naar pagina’s op je website maken. En het ziet er ook nog eens heel fraai uit! Hoe doe je dat eigenlijk, zo’n slideshow op je website plaatsen?
Een slideshow zonder navigatieknoppen
Er zijn diverse scripts beschikbaar waarmee je slideshows kunt maken. Een erg goede en tegelijk eenvoudige is een script van Jon Raasch. Hieronder volgt een uitleg en voorbeeld van dit script.
Dit script maakt, zoals vele anderen, gebruik van de bekendste en meestgebruikte Javascript-bibliotheek JQuery. JQuery bevat scripts waarmee je je website interactief kunt maken.
Je kunt JQuery kopieren naar je eigen webserver, maar je kunt ook makkelijk gebruik maken van het script zoals dat bij Google gehost staat. Hiervoor hoef je enkel maar twee regels code aan je pagina toe te voegen:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
Dit zijn de codes voor op dit moment de nieuwste versies van het script. Het wordt geregeld geüpdatet, als je wilt kun je gebruik maken van een andere versie. Op deze site vind je altijd de laatste versie van JQuery. We gebruiken zowel JQuery als JQuery UI.
De bovenstaande code zet je tussen de <head></head> tags van je webpagina.
Vervolgens ga je het eerste deel van de code van het slideshowscript op je webpagina zetten:
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');
if ( $active.length == 0 ) $active = $('#slideshow div:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>
Dit is de JavaScript die de slideshow instelt. De eerste paar regels zorgen ervoor dat de verschillende dia’s in de juiste volgorde afwisselend vertoond worden. Het laatste deel van de code zet de interval op 3 secondes (3000 milliseconden): om de drie secondes wordt de dia dus verwisseld. Je kopieert en plakt dit stuk code ofwel in het head-gedeelte ofwel (voor overzichtelijkheid) precies voor de plek waar je de slideshow op je webpagina wilt opnemen.
Hierna is het tijd om met CSS het uiterlijk van de slideshow te bepalen.
<style type="text/css">
/*** maak de hoogte en breedte gelijk aan je afbeeldingen **/
#slideshow {
position:relative;
height:300px;
width:450px;
}
#slideshow .slide {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}
</style>
Vervolgens komt de HTML-code van de eigenlijke slideshow. Hierin plaats je in div-tags de afbeeldingen die je wilt laten rouleren. Zorg ervoor dat alle afbeeldingen precies dezelfde afmetingen hebben. In dit voorbeeld hebben we 3 afbeeldingen van 450 pixels bij 300 pixels. Je kunt echter zelf zoveel afbeeldingen gebruiken als je maar wilt!
<div id="slideshow"> <div class="slide active"><a href="https://www.zelf-een-site-maken.nl"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk1.jpg" alt="Slideshow Image 1" /></a></div> <div class="slide"><a href="https://www.zelf-een-site-maken.nl"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk2.jpg" alt="Slideshow Image 2" /></a></div> <div class="slide"><a href="https://www.zelf-een-site-maken.nl"><img src="https://www.zelf-een-site-maken.nl/slideshow/frankrijk3.jpg" alt="Slideshow Image 3" /></a></div> </div>
Zoals je ziet staan de slides tussen div-tags. De div die je als eerste wilt laten zien krijgt de class ‘slide active’ mee, de rest gewoon ‘slide’. In het alt-attribuut van de img-tag staat steeds aangegeven welk nummer de slide heeft. Ook kun je aan elke afbeelding een url verbinden, zodat je daar naar toe gaat wanneer je er op klikt. In het voorbeeld zijn alle urls hetzelfde.
Dat was alles! Met deze codes heb je een eenvoudige slideshow gemaakt.
Dit is het resultaat:
Wil je de volledige code downloaden? Die vind je hier.