Ronddraaiende objectfoto

Als je iets wilt verkopen via internet of iets bijzonders wilt laten zien, is het leuk voor de bezoekers als je het betreffende object van meerdere kanten kunt laten zien.
Hier links zie je zo'n object: Een retro koffiemok.

Als je op het plaatje kliktof tikt wordt er om de 4 seconden een anders foto van de mok getoond, die uit een andere hoek is genomen. De foto's vloeien in elkaar over. Dat gaat door totdat je op de stopknop onder het plaatje kliktof tikt, of de pagina ververst.

Op deze pagina wordt uitgelegd hoe je zoiets doet. De code kun je downloaden om zelf te gebruiken, inclusief de foto's.

Inspiratie: Webdesigner Magazine nr. 78 (juli 2015), pag. 68 en 69.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De uitwerking op deze bladzijde wijkt sterk af van de code in het genoemde artikel.
Soms wordt een techniek gebruikt en/of getoond die gericht is op het gebruik binnen één bepaalde website. Dat geeft beperkingen, omdat de gebezigde aanpak gericht is op die specifieke site. Voor algemene toepassing is het dan te beperkt. Daar gaat ook het originele script mank aan.

• Er worden twee items besproken:
  1. De werking van het script, in algemene termen.
  2. Inbouwen in je eigen site.
   
• De werking van het script
• Deze toepassing gebruikt niet de modernste techniek, maar wel een die betrouwbaar is. Er wordt JavaScript gebruikt en wat CSS. Het betreft het script crossfade.js van brothercake.com.
• De op deze bladzijde gebruikte code is niet meer beschikbaar op brothercake.com. Je vindt het daarom in de downloadfile.
   
• Het script werkt ongeveer als volgt:
  
  • De waarde van de hoogste index in de array ifx.imgs wordt bepaald en bewaard in maxseq.
  • Het volgnummer van het plaatje op het scherm wordt bijgehouden in onscreen.
  • Door een klik op het plaatje wordt de function toggleRunning() gestart. Deze zorgt er voor dat stepRunning() elke 4 seconden wordt aangeroepen. Ook wordt de knop STOP geactiveerd.
  • stepRunning() werkt de waarde van onscreen bij en roept crossfade() aan. Die function laat het plaatje op het scherm verdwijnen door de CSS-eigenschap opacity in kleine stapjes te verlagen van 1 naar 0. Tegelijkertijd wordt de opacity van het nieuwe plaatje verhoogd van 0 naar 1.
    Doordat dit tegelijkertijd gebeurt, vloeien de plaatjes in elkaar over.
  • stepRunning() zet de variabele running op true. Dit wordt gebruikt door toggleRunning() om te bepalen wat die moet doen: De beweging starten of laten stoppen.
  • Een andere variabele is iidd. Daarin wordt een verwijzing naar het id="mokken" bewaard, zodat die verwijzing niet steeds opnieuw hoeft te worden bepaald.
  • Voor oude versies van Internet Explorer wordt de eigenschap filter:alpha(opacity=100); gebruikt in plaats van gewoon opacity. Dit wordt geregeld in transitions.css. De code voor img.dupe in transitions.css mag niet worden veranderd.
     
  • Door weer op het plaatje te klikken stopt het effect, omdat toggleRunning() wordt aangeroepen. Het script reageert niet als er een beweging loopt. Daarom is er de STOP-knop; die reageert altijd.
     
  • De precieze werking van crossfade() wordt hier niet besproken. Daarvoor is het script te complex. De parameterlijst wordt behandeld in het item Fade effecten met figuren II: Cross Fade.
  
   
• Inbouwen in je eigen site
• Pak de downloadfile uit en zet de code in je eigen HTML-bestand, zoals hieronder is aangegeven.
  In elk geval moet de file crossfade.js worden gelinkt vóór de rest van het JavaScript.
• Pas de file crossfade.js aan: zoek de code:
  ixf.imgs = [ 'mok-1.jpg','mok-2.jpg','mok-3.jpg','mok-4.jpg',
             'mok-5.jpg','mok-6.jpg','mok-7.jpg','mok-8.jpg'];
  Vervang de lijst met '.jpg-bestanden door je eigen foto's. Je kunt de lijst net zo lang of kort maken als je zelf wilt, maar moeten minimaal 2 foto's zijn.
• Je kunt alle CSS veranderen naar je eigen smaak. De inhoud van transitions.css kun je beter ongewijzigd laten. Dat geldt ook voor de inhoud van crossfade.js (natuurlijk behalve de Array ixf.imgs).

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

<style>
#deMok {
  width:175px;
  height:170px;
  border:0;
  float:left;
  margin-right:40px;
}
#deMok img {
  position:relative;
  top:0;
  left:0;
  width:175px;
  height:143px;
  opacity:1;
}
#deMok #knop {
  position:relative;top:0;right:0;
  width:175px;
  height:20px;
  cursor:pointer;
  text-align:right;
  border:1px solid black;
}
</style>
<!-- Image transitions by Brothercake - https://www.brothercake.com/ -->
<script src="crossfade.js"></script>
<link rel="stylesheet" href="transitions.css"
  media="screen, projection">

<scripts>
var onscreen = 0, running = false, maxseq = ixf.imgsLen-1;
var iidd, mokCounter;;
 
function toggleRunning() {
  if (running) {
  running = false;
  document.getElementById('knop').style.visibility = "hidden";
  clearInterval(mokCounter);
}
  else {
    iidd = document.getElementById('mokken')
    document.getElementById('knop').style.visibility = "visible";
    stepRunning();
    mokCounter = setInterval("stepRunning()",4000);
  }
}
 
function stepRunning() {
  running = true;
  onscreen = (onscreen < maxseq) ? onscreen + 1 : 0;
  crossfade(iidd, ixf.imgs[onscreen], '1')
}
</script>

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

<div id="deMok">
  <img id="mokken" src="mok-1.jpg" onclick="toggleRunning()">
  <img id="knop" src="stopknop.gif" style="visibility:hidden"
    span onclick="toggleRunning()">
</div>

Downloaden:
 
Druk op de knop:  File: voorb494.zip, 43 581 bytes.