PLUGINS VOOR UW WEBSITE

Geanimeerde skill bars met jquery en css

Hoe maak je een geanimeerde skill bar?

Donwnload de voorbeeldbestanden: https://www.schoolvoorbeeld.be/nodig/skillbar.zip

ImageZoom-plugin

SVZoomBox-plugin

De ZoomBox-plugin maakt het mogelijk om een afbeelding uit te vergroten als je er op klikt.

Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slides.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?v12"></script>

3. De HTML-structuur

De HTML-structuur verwacht een normale verwijzing naar een afbeelding.

<img src="images/foto.jpg"/>

4. De plugin activeren

Je hoef dus niets speciaals te doen. Je kan de ZoomBox-plugin activeren voor al je afbeeldingen met:

<script>
$(document).ready(function(){
   $("img").SVZoomBox();
});
</script>

Of je beperkt de plugin tot alle afbeeldingen met een bepaalde klasse:

<img src="images/foto.jpg" class="zoomimage"/>

<script>
$(document).ready(function(){
    $(".zoomimage").SVZoomBox();
});
</script>

Crowl:Slideshow

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.

ScrollPlugin

Voor ieder een plugin

Nu ik de meeste websites heb bekeken, stel ik vast dat ik steeds opnieuw dezelfde vragen voor interactiviteit te horen krijg. Uiteraard moet je niet zelf alles in javascript gaan coderen. Op het internet vind je massa's "plugins" (insteekmodules) voor jQuery waar je net dat effect mee gedaan krijgt, wat je wil bereiken.

Omdat ik steeds dezelfde vragen kreeg, heb ik besloten een aantal plugins te programmeren. Hieronder een top drie.

1. Scrollplugin

Je ziet het wel meer op andere websites. De navigatiebalk krijgt een ander uitzicht als je naar beneden "scrollt" op de pagina. Meestal gebruiken webmasters hiervoor de "scrollspy"-plugin van Bootstrap. Maar het kan korter, eenvoudiger en vooral met meer functionaliteit. Daarom de SchoolvoorbeeldScroll-plugin.

Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/scroll.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?v7"></script>

3. Het script starten

Het hangt er natuurlijk van af wat je wil bereiken. We geven hier 2 voorbeelden.

Scenario 1:

Je wil een bepaald element een andere achtergrondkleur geven als het tijdens het scrollen de bovenkant van de pagina bereikt.

<nav>...</nav>  
<div class="row">....</div>  
<div class="row" id="verander"> </div>

In mijn CSS-bestand heb ik de volgende regels ingesteld voor het element met id "verander":

#verander{
      height:30vh;
      background-color:black;
}

Ik wil dit element een andere achtergrondkleur én hoogte geven als het tijdens het scrollen de bovenkant van de pagina raakt.

Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina.

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({
        style: "height:50vh;background-color:yellow"
    });
});
</script>

Cool... dat werkt. Test het maar eens uit. Maar volg wel nauwkeurig alle stapjes.

Scenario 2:

Als het element met id "verander" de bovenkant van de pagina bereikt, wil ik de navigatiebalk een andere achtergrondkleur geven. Stel dat de navigatiebalk (<nav>) een zwarte achtergrondkleur heeft, dan wil ik die geel maken.

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({                 
        element: $("nav"),
        style: "background-color:yellow"
    });
});
</script>

Wie wil meer?

De plugin heeft nog meer mogelijkheden. Oneindig veel mogelijkheden zelfs. Maar het is voor wie nog wat verder wil gaan... Ik hoor het wel. Alvast één tipje. Je kan op het moment dat de "scroll"-positie wordt bereikt om het even welke andere javascript-opdracht uitvoeren. Een voorbeeld:

<script>
$(document).ready(function(){
    $("#verander").ikbenboven({                  
        element: $("nav"),
        style: "background-color:yellow",                  
        command: function(){                           
           //voer hier om het even welke javascript-opdracht uit.                  
        }
    });
});
</script>

Praktisch voorbeeld

Stel dat je een geanimeerde skillbar op je website plaatst. Dan zal die animatie uitgevoerd worden bij het laden van de pagina. Als je skillbar onderaan de webpagina staat, zal geen enkele bezoeker merken dat de skillbar geanimeerd is. Met de "scrollplugin" kan je dit probleem oplossen.

Stel dat het HTML-element waarin je skillbar zit, de class "skillbar" draagt. Dan kan je het effect op de volgende manier bekomen.

<script>
$(function(){
    $(".skillbar").ikbenboven({
        command: function() {
            $(".skillbar-bar").css("width", "1%");
            $('.skillbar').each(function() {
                $(this).find('.skillbar-bar').animate({
                   width: $(this).attr('data-percent')
                }, 2000);
            });
        }
   });
});
</script>

SlideTo-plugin voor one-page-design

2. De SlideTo-plugin voor one-page-design

Bekijk een werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slideto.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?v7"></script>

3. De normale gang van zaken: interne links

Een link gaat standaard naar een andere webpagina. Als je de onderstaande link zou opnemen in je HTML, en een gebruiker klikt erop, dan komt hij/zij terecht op de pagina "contact.html".

<a href="contact.html">Contact</a>

In geval van een "one-page-design" wil je niet naar een andere pagina springen, maar naar een onderdeel van dezelfde pagina. Dat kan eveneens met HTML, we spreken dan van "interne links" of "ankers".

<a href="#contact">Contact</a>

Voorwaarde is wel dat er elders in je document een "lege" link is opgenomen met als naam "contact":

<a name="contact"></a>

Je zal merken dat de "referentie"link een "#" bevat, maar de "name" niet. Als je op de eerste link (met href="#contact") klikt, dan springt de webpagina naar de tweede link (met name="contact").

Het zou natuurlijk veel "chiquer" zijn indien de pagina netjes zou doorschuiven tot op dat punt... Hiervoor hebben we javascript nodig.

4. Het script starten

Vergeet nu niet stap 1 en 2 te voltooien, of het onderstaande voorbeeld zal niet functioneren!

Het hangt er opnieuw van af wat je precies wil bereiken. Als al je links intern moeten zijn, dan kan je het volgende script toevoegen onderaan je webpagina:

<script>
$(document).ready(function(){
         $("a").slideto();
});
</script>

... en klaar is kees...

Het zou ook kunnen dat je enkel bepaalde links "intern" wil maken. Dan geef je die links een "class", bijvoorbeeld "intern".

<a href="#contact" class="intern">Contact</a>
<a href="#info" class="intern">Info</a>

Vervolgens pas je het script aan:

<script>
$(document).ready(function(){
    $(".intern").slideto();
});
</script>

Opties

De plugin bied nog een aantal opties:

*Optie*	*Doel*	*Waarde*	*Standaard*
speed	De snelheid van het schuiven bepalen met een vaste waarde of in milliseconden	"slow", "fast", 1000, 2000, 3000...	"slow"
slide	De waarde "swing" zorgt ervoor dat er een versnelling en vertraging gebeurt bij het "sliden".	"linear", "swing"	"linear"
top	Standaard stopt het schuiven als het bestemmingselement de bovenrand van het browservenster bereikt. Je kan daar een aantal pixels aan toevoegen.	100, 200, 10, 50...	0
command	Je kan op het einde van het "sliden" een aantal javascript-commando's uitvoeren. Het is ook mogelijk om hier opnieuw informatie op te vragen nl. het element waar op werd geklikt én het referentieadres.	function(object){ console.log(object.element); console.log(object.destination); }	(niets)

Hoe voeg je opties toe?

<script>
$(document).ready(function(){
     $(".intern").slideto({
            speed: 3000,
            slide: "swing",
            top: 50,
            command: function(object){
                //doe hier wat je wil
            }
     });
});
</script>

NewsPaper-plugin

3. NewsPaper-plugin

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

Met de NewsPaper-plugin kan je een reeks artikels verbergen en via een selectielijst (een vervolgkeuzelijst) die weer één voor één lezen. Dat maakt de inhoud van je pagina's minder zwaar. Het opsplitsen en verbergen van de informatie op je webpagina, maakt het voor bezoekers eveneens gebruiksvriendelijker.

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?v7"></script>

3. Je HTML voorbereiden

Maak in je HTML-pagina een onderdeel dat een aantal <article>-elementen bevat.

Bijvoorbeeld:

<section class="newspaper">
         <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
        <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
        <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
</section>

We hebben aan het element de CSS-klasse "newspaper" gegeven, maar dat mag je uiteraard zelf beslissen. Het hoeft ook geen <section>-element te zijn, het mag ook gewoon gaan om een <div>.

4. Het script invoeren

<script>
$(document).ready(function(){
        $(".newspaper").newspaper();
});
</script>

Klaar is kees... Je kan alles natuurlijk ook nog wat "vormgeven" met CSS.

5. Opties

Standaard gaat de plugin op zoek naar <article>-elementen. Wil je andere elementen zichtbaar en onzichtbaar maken, dan moet je de opties van de plugin wijzigen. Standaard neemt de plugin het eerste <h3>-element dat hij in het <article> vindt, als titel voor de selectielijst. Ook dat kan je wijzigen. Als de plugin geen titel vindt, dan nummert hij de lijst.

<script>
$(document).ready(function(){
       $(".newspaper").newspaper({
              element: "div",
              title:"h1",
              text: "Kies het gewenste artikel"
       });
});
</script>

Optie	Doel	Waarde	Standaard
element	Standaard zoekt de plugin <article>-elementen. Je kan dit vervangen door een ander element.	p, div, li...	article
title	Standaard zoekt de plugin naar de eerste <h3> in elk "artikel". Je kan die waarde veranderen.	h1, h2, h4...	h3
text	De titel van de vervolgkeuzelijst.	Een tekst tussen aanhalingstekens.	"Kies een artikel"

Collapse-plugin

Met de collapse-plugin bouw je in een oogwenk een uitklapbare lijst met artikels.

Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/papercollapse.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?v12"></script>

3. De HTML-structuur

In de eerste plaats moet u de benodigde HTML-structuur voorzien in je webpagina. We maken een <div>- of <section>-element met daarin een aantal <article>-elementen. Elk <article> bevat twee <div>-elementen. Eentje met de class "articletitle", eentje met de class "articlecontent". In "articletitle" schrijft u de titel van het artikel, in "articlecontent" de inhoud van het artikel (tekst, foto's, films...).

<div class="mypaper">
      <article>
         <div class="articletitle"><h3>Artikel 1</h3></div>
         <div class="articlecontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </article>
      <article>
         <div class="articletitle"><h3>Artikel 2</h3></div>
         <div class="articlecontent">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
      </article>
      <article>
         <div class="articletitle"><h3>Artikel 3</h3></div>
         <div class="articlecontent">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>
     </article>
</div>

4. Het script invoeren

Hiervoor voeg ik het volgende script toe net boven </body> in mijn webpagina. In het bovenstaande voorbeeld geven we aan de "wrapper" de class "mypaper". In onze javascript/jquery-code selecteren we nu het element ".paper", en we starten de plugin met de opdracht "papercollapse()".

<script>
$(document).ready(function(){
    $(".mypaper").papercollapse();
});
</script>

De plugin voegt ook de noodzakelijk CSS-code automatisch toe aan de pagina.

5. Opties

Ook bij deze plugin kan u een aantal opties instellen.

<script>
$(document).ready(function(){
       $(".mypaper").papercollapse({
                iconOpen:'<i class="fa fa-caret-right" aria-hidden="true"></i>',
                iconClose:'<i class="fa fa-caret-down" aria-hidden="true"></i>',
                allowmultiple:false,
                titleElementClass: "articletitle",
                contentElementClass: "articlecontent",
                childelement: "article",
                showfirst: false
       });
});
</script>

*Optie*	*Doel*	*Waarde*	*Standaard*
iconOpen	Een icoontje weergeven om duidelijk te maken dat je het element kan openklikken.	Font Awesome Icons	(geen)
iconClose	Een icoontje weergeven om duidelijk te maken dat je het element weer kan dichtklikken	Font Awesome Icons	(geen)
allowmultiple	Bij de waarde "true" kunnen meerdere artikels open staan. Bij de waarde "false" gaan de andere artikels dicht als je er één openklikt.	true, false	true
titleElementClass	De stijlklasse voor de titels van de artikels.	(vrije keuze: enkel tekens van a - z)	.articletitle
contentElementClass	De stijlklasse voor de inhoud van de artikels	(vrije keuze: enkel tekens van a-z)	.articlecontent
childelement	De artikels die je wil open en dichtklikken. Welk HTML-element?	article, div, li...	article
showfirst	Standaard het eerste artikel in de lijst openen.	true, false	true