Terug

CrowlSlideShow-plugin

De CrowlSlideShow-plugin tovert een reeks afbeeldingen om in een slideshow.

Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slideshow.php

1. Integreer jQuery in je webpagina

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

2. Integreer de plugin.

Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.

<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v16"></script>

3. De HTML-structuur

Je maakt een div-element en je geeft het een bepaald (uniek) id. In dat element plaats je een aantal <img>-markeringen voor afbeeldingen.

<div id="album">
       <img src="images/foto1.jpg"/>
       <img src="images/foto2.jpg"/>
       <img src="images/foto3.jpg"/> 
</div>

4. De plugin activeren

Je hoef dus niets speciaals te doen. Je kan de slideshow nu activeren:

<script> 
$("#album").CrowlSlideShow(); 
</script>

De plugin begrijpt ook bepaalde parameters:

<script> 
$("#album").CrowlSlideShow({
        background: "orange",
        border: "1px solid red",
        height: "300px",
        width: "100vw" 
}); 
</script>

Uiteraard kan je de waarde van die parameters aanpassen.