Je eigen website
Zelf een site maken, hoe doe je dat?

Zoeken

You are here: Home ∼ Slideshow op je site

Slideshow op je site

Published by admin on 12 november 2012

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.

Posted in Voorbeelden Tagged JavaScript Slideshow, JQuery Slideshow, Slideshow, Slideshow maken, Slideshow op je site
← Previous Next →

Hoe maak je zelf je eigen site?

  • De basis
    • HTML of Online sitebuilder
    • Kies een HTML-editor
    • HTML
    • CSS
    • JavaScript
    • PHP
    • Een MySQL-database
    • PHP op je eigen computer
    • Je site online zetten met FTP
    • Zelf een webpagina maken – een handleiding
    • Gratis website templates
      • Templates gebruiken
  • Hosting en domeinnaam kiezen
    • Gratis hosting
    • Goedkope hosting
    • Gratis blog maken
    • Een domeinnaam registreren
  • Voorbeelden om je website uit te breiden
    • PHP-includes
    • Slideshow op je site
    • Een lightbox voor foto’s
    • Reacties via Facebook installeren
    • Kleuren kiezen
    • Google Analytics installeren
  • WordPress
    • WordPress installeren
    • WordPress-plugins en thema’s installeren
    • Gratis WordPress-thema’s
    • 10 handige WordPress-plugins
    • WordPress en plugins updaten
  • Bezoekers trekken
    • Hoger in Google
      • Hoger in Google – Opbouw van je site
      • Hoger in Google – Webteksten schrijven
    • Social media marketing
    • Een gratis nieuwsbrief maken
  • Geld verdienen met je website
    • Google Adsense op je website
    • Geld verdienen als affiliate

Copyright © 2022 Je eigen website.