Foto-carrousel met tijdlijn

Het maken van een mooie presentatie vraagt soms een creatieve aanpak. Zo'n aanpak vond ik in een bespreking van de site waar het Museum Boijmans Van Beuningen de collectie toont. Die bespreking stond in Webdesigner Magazine nr. 91 (nov. 2016), pag. 52 e.v. De vermoedelijke auteur is Mark Shufflebottom.
N.B.: Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.

Op de site van Boijmans Van Beuningen zie je een foto-carrousel, die is uitgerust met een tijdlijn. Op deze pagina wordt iets vergelijkbaars besproken. De code van het voorbeeld is beschikbaar om te downloaden, maar zonder de foto's.

We beginnen met het voorbeeld, dat opent in een nieuw venster of tabblad. De foto-carrousel bestaat uit zeven verschillende foto's die allemaal zijn gemaakt op 15 oktober 2014. Op de tijdlijn zie je het tijdstip staan waarop de foto is gemaakt.
De foto's schuiven niet maar de foto 'springt' uit het scherm en de volgende foto 'valt' er in. De carrousel loopt uit zichzelf, maar je kunt ook bladeren met de knoppen << en >>. De carrousel loopt oneindig door.

Dit is bijzonder geschikt voor een titelpagina (zoals bij Boijmans Van Beuningen) of als een zelfstandig draaiende presentatie (zoals op deze site).

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Dit is een jQuery-toepassing, dus je hebt jQuery nodig. Versie 1.9.1 volstaat. Gebruik een geminificeerde versie, die laadt het snelste. Je betrekt die het beste van een CDN. In het voorbeeld is code.jquery.com gebruikt.
   
• De werking van het script
• de carrousel is gemaakt met behulp van Owl Carousel 2, versie 1.3.3. Op het moment dat dit wordt geschreven is versie 2.3.4 het meest recent.
  Dit is een uitgebreid, maar helaas lastig te doorgronden pakket, dat bestaat uit CSS en JavaScript (jQuery). Diepgaande bespreking blijft hier achterwege. Het is goed gedocumenteerd (volg de link naar Owl Carousel 2 en klik rechtsboven op 'Docs').
   
• De code is opgebouwd uit HTML (in het document), CSS (in de file styles.css en JavaScript (jQuery; in het document).
   
• HTML
• De HTML-code bestaat uit één enkele <div>-tag met de klasse container. Die dient alleen om de foto-carrousel en de tijdlijn bij elkaar de houden.
• Binnen container zijn twee <div>-tags. De eerste heeft id="sync1 class="owl-carousel (let op de schrijfwijze). Deze bevat de foto's van de carrousel.
  De tweede i><div>-tag heeft id="sync2". Hierin zit de tijdlijn-informatie.
• De klasse owl-carousel hoort bij de jQuery-plugin OwlCarousel2, waarover later meer.
• Elke foto in de carrousel zit in een <div>-tag, met klasse item. Binnen item is er alleen een <img>-tag met de foto, maar er kan ook andere HTML in staan.
• Elke item in de tijdlijn zit in een <div>-tag, met klasse item. Binnen item is er alleen een <h1>-tag met id= pos1, pos2, pos3, pos4 en pos5. De content is achtereenvolgens 1, 2, 3, 4, 5.
  Er is hier gebruik gemaakt van <h1>, maar je kunt ook andere tags gebruiken (Je moet dan wel de CSS van sync2 aanpassen).
   
• Er zijn vijf posities op de tijdlijn zichtbaar. Dit kun je veranderen, mits het aantal oneven is, zodat de 'actieve' positie altijd in het midden van het window kan komen te staan. Deze aanpassing vraagt wijziging van de HTML, de CSS en het JavaScript. Met name dat laatste is lastig.
• Hier toont zich meteen de zwakte van het script: De carrousel is responsive, maar de tijdlijn is statisch gecodeerd. Dat maakt wijzigen moeilijk.
  De tijdlijn en de carrousel zijn twee gescheiden entiteiten, wat voor onprettige neveneffecten zorgt. Zo zit de carrousel vastgepind aan de bovenrand van het window, de tijdlijn zit vast aan de onderrand. Zolang de de lengte-breedte verhouding van de foto's en het window ongeveer gelijk zijn, gaat het goed, maar als het window veel hoger is dan breed, verdwijnt de tijdlijn uit beeld.
   
• CSS
• De CSS is verdeeld over vier files (versie 1.3.3):
  - owl.carousel.css Hierin staat de core-CSS, alle dingen die op het laagte niveau worden geregeld.
  - owl.transitions.css Hierin staan de transitions die je kunt kiezen van uit het JSON-object owlCarousel (zie bij het JavaScript)
  - owl.theme.css Hierin staat hoe de carrousel moet worden opgemaakt. Er zijn diverse thema's beschikbaar.
  - styles.css Dit is je eigen CSS, waarin zaken in owl.theme.css kunnen worden aangepast aan je eigen wensen. Dit is de enige file waarin je hoeft te wijzigen, de rest kan onveranderd blijven.
• In versie 2.3.4 heeft de file owl.transitions.css een andere naam: animate.css.
   
• De inhoud van styles.css is verdeeld in twee delen:
  - Algemene opmaak
  - Owl Carousel.
   
• De algemene opmaak begint met de body. Daarvoor worden alleen het lettertype en de overflow ingesteld. De laatste heeft een bijeffect: als de beeldverhouding niet goed is verdwijnt de tijdlijn uit beeld.
• De afmetingen van #sync1 (dat zijn de foto's) worden ingesteld, gevolgd door de afmetingen van de foto's zelf (#sync1 .item).
• Daarna worden de eigenschappen van de tijdlijn (#sync2, #sync2 .item en #sync2 .item h1) ingesteld.
• Tenslotte wordt de middelste tijdsaanduiding (van de zichtbare foto, #pos3) aangepast.
   
• Owl Carousel gebruikt alleen klassen, waarvan de namen steeds beginnen met .owl-. Dat maak het gemakkelijk ze te onderscheiden van je eigen klassen.
• Voor het voorbeeld op deze pagina is meer een klein deel van het theme aangepast. Om precies te zijn: De knoppen << en >>. Deze twee knoppen (controls)zijn binnen het theme, en het zijn buttons.
  In Owl Carousel termen: .owl-theme .owl-controls .owl-buttons.
• Daarbinnen vind je nog opmaak voor een <div>-tag, en voor de vorige- en volgende-knoppen (.owl-prev en .owl-next). Deze laatste twee dienen om default-instellingen te overschrijven.
   
• JavaScript
• Het JavaScript doet twee dingen:
  - Het initialiseert de carrousel
  - Het bestuurt de tijdlijn
• De carrousel wordt uitgevoerd door het pakket Owl Carousel 2. De initialisatie gaan via het JSON-object owlCarousel, dat is gekoppeld aan de <div>-tag met id="sync1".
• De tijdstippen (of jaartallen, maanden, datums) staan in de array dates. Het aantal elementen in die array moet gelijk zijn aan het aantal foto's, anders krijg je een vreemd effect.
• De volgorde van tijdstippen in de array moet gelijk zijn aan de volgorde waarin de foto's zijn opgegeven.
   
• De carrousel begin bij de eerste foto in de lijst. Dat wordt geregeld door de code
    sync1.trigger("owl.jumpTo", 0);
  Je kunt die veranderen door de nul (eerste element van de lijst) te vervangen door een hoger getal. Het spreekt voor zich dat het gerefereerde element moet bestaan.
• Bij het wijzigen van een foto wordt ook de tijdlijn bijgewerkt. Dat wordt gestart door het object owlCarousel, met de instelling afterAction: syncPosition. De function syncPosition(el) verandert de tijdlijn.
• De tijdlijn heeft vijf posities, waarvan de derde wordt gebruikt om het tijdstip te tonen van de foto die wordt getoond. De vijf posities worden aangeduid met de letters a tot en met e. Bij elke foto-verwisseling worden a tot en met e opnieuw berekend. De bijbehorende tekst uit de array dates wordt op de juiste positie in de tijdlijn op het scherm gezet.
• Het aantal posities in de tijdlijn kan worden aangepast, maar het moet oneven zijn. Er is dan altijd een 'middelste' element in het midden van het scherm.
  Een degelijke aanpassing vraagt dat het JavaScript gedeeltelijk opnieuw wordt geschreven.
   
• Toepassen in je eigen site
• Download Owl Carousel 2. Je krijgt een .zip-file, die pak je uit.
• In de submap dist vind je het benodigde JavaScript-bestand. De map dist\assets bevat de CSS-files.
  N.B.: De hier gebruikte file owl.transitions.css heb je niet nodig met Owl Carousel 2.3.4!
• Regel de foto's voor de carrousel. Zorg ervoor dat ze allemaal even groot zijn, dan is het effect het mooiste.
• Bouw de code op zoals in het voorbeeld.
   
• Tenslotte...
• 
  De tijdlijn werkt niet op een mobiele telefoon, waarschijnlijk doordat de tijdlijn uit beeld is geschoven. De carrousel doet het goed. Dit geldt voor Chrome, FireFox en Edge.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>, de volgorde is belangrijk).

<link href="owl.carousel.css" rel="stylesheet">
<link href="owl.transitions.css" rel="stylesheet">
<link href="owl.theme.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="owl.carousel.min.js"></script>

(Zet dit in de <BODY>).

div class="container">
  <div id="sync1" class="owl-carousel">
    <div class="item"><img src="foto1.jpg"></div>
    <div class="item"><img src="foto2.jpg"></div>
    <div class="item"><img src="foto3.jpg"></div>
    <div class="item"><img src="foto4.jpg"></div>
    <div class="item"><img src="foto5.jpg"></div>
    <div class="item"><img src="foto6.jpg"></div>
    <div class="item"><img src="foto7.jpg"></div>
  </div>
 
  <div id="sync2">
    <div class="item"><h1 id="pos1">1</h1></div>
    <div class="item"><h1 id="pos2">2</h1></div>
    <div class="item"><h1 id="pos3">3</h1></div>
    <div class="item"><h1 id="pos4">4</h1></div>
    <div class="item"><h1 id="pos5">5</h1></div>
  </div>
</div>
<script>
$(document).ready(function () {
  var sync1 = $("#sync1");
  var pos1 = $("#pos1");
  var pos2 = $("#pos2");
  var pos3 = $("#pos3");
  var pos4 = $("#pos4");
  var pos5 = $("#pos5");

  var dates = ["10:47", "10:48", "10:49",
                "11:07", "11:10", "11:18", "11:26"];
 
  sync1.owlCarousel ({
    singleItem: true,
    slideSpeed: 1000,
    navigation: true,
    pagination: false,
    afterAction: syncPosition,
    responsiveRefreshRate: 200,
    rewindSpeed: 0,
    autoPlay: true,
    transitionStyle: "fadeUp",
    navigationText: ["&lt;&lt;", "&gt;&gt;"]
  });
 
  sync1.trigger("owl.jumpTo", 0);

  function syncPosition(el) {
    var a, b, c = this.currentItem, d, e;
 
    if (c == 0) {
      a = dates.length - 2;
      b = dates.length - 1;
    }
    if (c == 1) {
      a = dates.length - 1;
      b = c - 1;
    }
    d = c + 1;
    e = c + 2;
 
    if (c > 1) {
      a = c - 2;
      b = c - 1;
      d = c + 1;
      e = c + 2;
      if (c == dates.length - 2) {
        d = dates.length - 1;
        e = 0;
      }
      if (c == dates.length - 1) {
        d = 0;
        e = 1;
      }
 
    }
    pos1.text(dates[a]);
    pos2.text(dates[b]);
    pos3.text(dates[c]);
    pos4.text(dates[d]);
    pos5.text(dates[e]);
  }
});
</script>

Downloaden:
 
Druk op de knop:  File: voorb548.zip, 1760 bytes.

Opmerking:
 
Als je dit met voorbeeld aan de slag wilt zoals het op deze pagina wordt gebruikt, dan kan dat. Stuur gewoon even een mailtje, dan stuur ik de Owl-Carousel bestanden naar je op.