Maak een plaatjescarrousel met datumindicatie

wdnl091_boijmans

Het is een verrassend feit dat musea gemiddeld maar vijf procent van hun collecties aan het publiek tonen. Het Museum Boijmans van Beuningen in Rotterdam hoopt dat te veranderen door hun 145.000 stukken online te zetten. Daarvoor moest de website op zo’n manier worden opgezet dat bezoekers door verschillende kunstwerken kunnen bladeren en zoeken naar de werken die ze interesseren. Daarnaast vind je ook informatie over hun makers. De gebruiker kan dan aan de zijkant van het scherm op filters klikken en de resultaten verder naar ingestelde criteria specificeren. Dit biedt een geweldige mogelijkheid om kunstwerken te bekijken die je anders niet zou kunnen zien. De resultaten worden in responsive tegels ingedeeld zodat de schermgrootte maximaal wordt benut.

De online galerij van Boijmans zal uiteindelijk alle 145.000 kunstwerken bevatten, dus moest er een opzet komen die deze groei toeliet. Om hier nog iets eenvoudig in te kunnen vinden, is er een handige interface bedacht. De carrousel valt op omdat hij afwijkt van de standaard vormgeving. De afbeeldingen zijn gekoppeld aan de tijdlijn en zowel de afbeeldingen als teksten worden door mooie overgangen afgewisseld. Omdat je zo vaak carrousels ziet, is het leuk als er iets nieuws mee wordt gedaan.

Techniek

1. Een carrousel met tijdlijn

In de projectbestanden die je van onze website downloadt, staat al een eenvoudige carrousel. Open index.html en voeg na het sync1-element in de secties toe om datums te tonen.

2. Datums vormgeven

De content moet de juiste positie krijgen zodat de datums correct voorlangs de carrousel worden getoond. Voeg CSS toe om te zorgen dat elke datum horizontaal onder de carrousel te zien is. Voor de juiste positie op kleinere schermen zijn media query’s nodig.

3. Datumgrootte

Het font voor de datums wordt 18 pixels. De geselecteerde ‘hoofd’-datum in het midden is semitransparant met een zwarte achtergrond en een iets groter font, zodat die wat meer opvalt.

  • #sync2 .item h1 {
  • font-size: 18px;
  • }
  • #pos3 {
  • color: #FFF;
  • font-size: 20px;
  • background: rgba(0, 0, 0, 0.4);
  • }
4. Functionaliteit toevoegen

Verderop in de JavaScript-code staat een lege functie, syncPosition. De code hieronder wordt daarin geplaatst, omdat de functie vlak na de beeldovergang wordt aangeroepen. De code probeert te zien of de datum van het derde element vooraan in de datums-array staat, in welk geval de einddatums op de plek van de eerste datums komen.

  • 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;
5. Welke dag is het?

Voeg de onderstaande code toe. Deze checkt of de derde datum aan het einde van de array staat. Is dat zo, dan worden de begindatums erachter geplaatst. Dit wordt in een eindeloze loop gestopt, zodat de datums continu blijven doorlopen.

  • 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;
  • }
  • }
6. Datum tonen

Nu wordt de correcte datum in elke div-tag op het scherm getoond. Sla de code op en test dit in je browser om te controleren of de carrousel en de datums samen veranderen terwijl je door de afbeeldingen bladert.

  • pos1.text(dates[a]);
  • pos2.text(dates[b]);
  • pos3.text(dates);
  • pos4.text(dates[d]);
  • pos5.text(dates[e]);

Deel dit artikel of reageer