Fotogalerij II: met strip met miniaturen

❮ ❯

❮ ❯

Hierboven zie je een fotogalerij, of carrousel zo je wilt. Er onder staat een strip met miniaturen, die je kunt verschuiven met > en <. Als je op zo'n miniatuur klikt of tikt, krijg je de overeenkomende foto te zien. Met > en < (staan op de foto) ga je naar de volgende resp. vorige foto.
Het miniatuur van de grote foto staat steeds in het midden van de strip.
Op deze pagina staat beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, behalve de foto's. Daar moet je zelf voor zorgen.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Inbouwen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door het item Fotogalerij, gecombineerd met de galerij-app op mijn Samsung-tablet en een paar websites op internet. Voor deze pagina heb ik iets gebouwd wat er op lijkt.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
   
• De werking van het script
• In dit verhaal wordt alleen de strip met miniaturen besproken. Voor de grote foto's wordt verwezen naar het item Fotogalerij. Het bewegen van de foto's werkt nl. exact hetzelfde.
• De bewegingsrichting van de strip is vaak tegengesteld aan de bewegingsrichting van de foto's. Dat komt door de manier waarop de strip is geprogrammeerd. Het versterkt het effect van de animatie.
   
• HTML
• De HTML van deze fotogalerij bestaat uit een <div>-tag met class="container", direct gevolgd door een <div>-tag met class="stripcontainer".
• container bevat de foto's, stripcontainer bevat de strip met miniaturen ('thumbnails').
• De bestandsnamen van de thumbnails zijn gelijk genomen aan die van de grote foto's, maar beginnen met tn_. Dat helpt om het overzicht te houden als er veel foto's zijn. De foto's en de thumbnails moeten nl. in dezelfde volgorde worden opgegeven.
   
• De <div>-tag met class="stripcontainer" bevat een <a>-tag met klasse prevtn, een <span>-tag met klasse stripcontent en een <a>-tag met klasse nexttn.
• De twee <a>-tags hebben geen href-attribuut, maar roepen de JavaScript-function moveStripBy() aan via onclick.
• stripcontent bevat een <span>-tag met id="strip". Hierin staan de <img>-tags met de thumbnail-bestanden. Deze laatste heeft een style-attribuut, dat nodig is om de strip te kunnen verschuiven met behulp van JavaScript.
   
• CSS
• De CSS die hieronder wordt besproken staat in de file styles.css onder /* De strip met miniaturen */.
• De klasse stripcontainer positioneert de strip met de volgende / vorige knoppen in het midden van de regel. Ook wordt hier de hoogte van de strip vastgelegd
• De klasse stripcontent centreert de strip binnen de stripcontainer en zorgt ervoor dat de strip alleen binnen deze klasse zichtbaar is. Dat gebeurt met overflow:hidden. Voor de duidelijkheid is er een rand omheen gezet.
• Omdat het aantal foto's, en dus ookmhet aantal thumbnails niet op voorhand bekend is, is de breedte van de strip dat ook niet daaom staat de width van #strip op auto. Om te zorgen dat de thumnails allemaal achter elkaar blijven staan, is white-space:nowrap; toegevoegd. De beweging van de strip wordt vloeiend gemaakt met een transition.
• Als laatste worden de knoppen 'volgende' en 'vorige' geplaatst en opgemaakt, dat zijn de klassen nexttn en prevtn. Dat gebeurt in één blok. De plaats van 'volgende' wordt naderhand overschreven om hem rechts van de strip te krijgen.
• Als je met de muis over een van deze knoppen gaat, verkeurt deze van zwart naar (bijna) wit. Dat gaat met de pseudo-klasse :hover. De kleurovergang gaat vloeiend via een transition. Op een aanraakscherm verkleuren de knoppen bij een aanraking, maar de knoppen kleuren pas weer terug nadat het scherm opnieuw is aangeraakt. Dit is een eigenschap van aanraakschermen.
   
• JavaScript
• Het JavaScript waarmee de strip wordt bewogen omvat twee functions: moveStripTo() en moveStripBy().
• moveStripTo() wordt aangeroepen als op een van de knoppen 'volgende' of 'vorige' op de foto wordt geklikt. of getikt. Deze function heeft één parameter: seqno, dit is het volgnummer van de foto die in beeld komt.
• moveStripTo() berekent de eigenschap left van de strip, zodanig dat de thumbnail van de foto in het midden komt. Vervolgens wordt de strip met die waarde van left gepositioneerd.
• moveStripBy() wordt aangeroepen als op een van de knoppen 'volgende' of 'vorige' van de strip wordt geklikt. of getikt. Deze function heeft één parameter: delta, dit is de verplaatsing van de strip naar links (delta < 0) of naar rechts (delta > 0).
• moveStripBy() verplaatst de strip naar links of naar rechts. Er zijn beperkingen aangebracht, waardoor de strip niet uit beeld kan verdwijnen.
   
• Inbouwen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
• Regel een stel foto's. Zorg er voor dat ze allemaal even groot zijn.
• Maak de thumbnails. Dat gaat het beste met software die daar speciaal voor is gemaakt, bijvoorbeeld Easy Thumbnails 3.0 van www.fookes.com.
• Zet de foto's en de thumbnails in de code.
   
• Als je eigen foto's een andere beeldverhouding hebben dan 16:9, of als de galerij andere afmetingen moet hebben in je document, moeten er een paar wijzigingen worden aangebracht in de CSS en het JavaScript:
  - CSS: wijzig de afmetingen width:600px en height:338px: regels 10 en 17 in file styles.js.
  - JavaScript: wijzig de breedte: getallen 600 resp. -600: regels 32 en 37 in file script.js.
• Als de de afmetingen van de strip wilt wijzigen moet er worden gewijzigd in de CSS en in het JavaScript:
  - CSS: wijzig de afmetingen width en height: regels 47, 54, 62 en 68 in file styles.js
  - JavaScript: wijzig de constanten thumbWidth (= breedte van de miniaturen) en stripLeft (= ½ · [breedte van de strip - breedte van de thumbnail]) in file script.js.
   
• Foto's verwijderen doe je door de hele <div>-tag met id="no_x" te verwijderen. Verwijder ook de bijbehorende thumbnail. De administratie wordt automatisch meegenomen.
  Als de verwijderde foto niet de laatste foto is, moet je de overblijvende foto's hernummeren om te zorgen dat er geen gaten in de nummering ontstaan.
• Een foto toevoegen doe je door een <div>-tag met id="no_x" in de code op te nemen. De bijbehorende thumbnail moet op dezelfde plaats in de reeks staan als de foto.
  Als de nieuwe foto niet het laatste in de reeks is, moet er worden hernummerd zoals hiervoor is beschreven.
   
• Tenslotte:
• Dit effect komt het best tot zij rechts als er veel (minstens 10) foto's zijn.

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>).

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar de fotogalerij moet verschijnen).

<!-- Slideshow container -->
<div class="container">
  <!-- Foto op 100% breedte van de container -->
  <div class="mySlides" id="no_0" style="left:0; opacity:1">
    <img src="foto_1.jpg" alt="foto 1" title="foto 1" style="width:100%">
  </div>
  <div class="mySlides" id="no_1" style="left:-600px; opacity:0">
    <img src="foto_2.jpg" alt="foto 2" title="foto 2" style="width:100%">
  </div>
  <div class="mySlides" id="no_2" style="left:-600px; opacity:0">
    <img src="foto_3.jpg" alt="foto 3" title="foto 3" style="width:100%">
  </div>
  <div class="mySlides" id="no_3" style="left:-600px; opacity:0">
    <img src="foto_4.jpg" alt="foto 4" title="foto 4" style="width:100%">
  </div>
  <div class="mySlides" id="no_4" style="left:-600px; opacity:0">
    <img src="foto_5.jpg" alt="foto 5" title="foto 5" style="width:100%">
  </div>
  <div class="mySlides" id="no_5" style="left:-600px; opacity:0">
    <img src="foto_6.jpg" alt="foto 6" title="foto 6" style="width:100%">
  </div>
  <div class="mySlides" id="no_6" style="left:-600px; opacity:0">
    <img src="foto_7.jpg" alt="foto 7" title="foto 7" style="width:100%">
  </div>
 
  <!-- Knoppen volgende en vorige -->
  <a class="prev" onclick="vorigeFoto()">&#10094;</a>
  <a class="next" onclick="volgendeFoto()">&#10095;</a>
</div> <!-- container -->
 
<div class="stripcontainer">
  <a class="prevtn" onclick="moveStripBy(-200)">&#10094;</a>
  <span class="stripcontent">
    <span id="strip" style="left:205px">
      <img src="tn_foto_1.jpg" alt="foto 1" title="foto 1" onclick="toonFoto(1)">
      <img src="tn_foto_2.jpg" alt="foto 2" title="foto 2" onclick="toonFoto(2)">
      <img src="tn_foto_3.jpg" alt="foto 3" title="foto 3" onclick="toonFoto(3)">
      <img src="tn_foto_4.jpg" alt="foto 4" title="foto 4" onclick="toonFoto(4)">
      <img src="tn_foto_5.jpg" alt="foto 5" title="foto 5" onclick="toonFoto(5)">
      <img src="tn_foto_6.jpg" alt="foto 6" title="foto 6" onclick="toonFoto(6)">
      <img src="tn_foto_7.jpg" alt="foto 7" title="foto 7" onclick="toonFoto(7)">
    </span> <!-- strip -->
  </span>  <!-- stripcontent -->
  <a class="nexttn" onclick="moveStripBy(200)">&#10095;</a>
</div> <!-- stripcontainer -->

Downloaden:
 
Druk op de knop:  File: voorb731.zip, 2355 bytes.