Fade-effecten met figuren IV: Fade

Hieronder zie je een foto. Als je er op klikt vloeit de foto over in een andere. Op deze pagina wordt uitgelegd hoe je dat doet.

De code kun je downloaden om zelf te gebruiken, echter zonder de foto's.

• Er worden twee items besproken:
  1. Inbouwen in je eigen site.
  2. Workaround voor het <alt>-attribuut.
   
• Het gebruikte JavaScript is gemaakt door een web-ontwikkelaar uit Engeland, Brothercake.
• Dit is een verbeterde versie van het item Fade-effecten met figuren II: Cross Fade, en is onderdeel van het pakket 'Transitions 2.0'. Deze code dateert uit 2011 en lijkt niet meer te worden onderhouden.
• De code bevat meerdere overgangen met of zonder fade-effect, en is beschikbaar in meerdere smaken:
  •  Voor debug-doeleinden is er leesbare JavaScript-code met uitgebreide beschrijvingen dat alle acht de overgangen en het fade-effect bevat. Dit is een behoorlijk groot bestand.
  •  Van de debug-uitvoering is ook een gecomprimeerde versie beschikbaar, die aanzienlijk kleiner is, maar wel de acht overgangen en het fade-effect bevat.
  •  Er zijn ook gecomprimeerde versies beschikbaar die elk één overvloei-effect en het fade-effect bevatten, te weten:
      ⇒  Wipe.
            Zie het item: Fade-effecten met figuren V: Wipe
      ⇒  Slide.
            Zie het item: Fade-effecten met figuren VI: Slide
      ⇒  Grow.
            Zie het item: Fade-effecten met figuren VII: Grow
      ⇒  Twist.
            Zie het item: Fade-effecten met figuren VIII: Twist
      ⇒  Skew.
            Zie het item: Fade-effecten met figuren IX: Skew
      ⇒  Blinds.
            Zie het item: Fade-effecten met figuren X: Bars I: Blinds
      ⇒  Squares.
            Zie het item: Fade-effecten met figuren X: Bars II: Squares
      ⇒  Checkerboard.
            Zie het item: Fade-effecten met figuren X: Bars III: Checkerboard
   
• Het effect werkt niet helemaal lekker in Chromium-browsers (o.a Chrome en Edge) met een aanraakscherm. Als je op foto tikt, wordt deze heel kort geselecteerd waarbij de foto even lichtblauw oplicht. FireFox heeft dit euvel niet.
• Hoewel de code zeer robuust is, levert het een klein probleempje op: In de loop der jaren is een functie van de alt-tekst, namelijk het tonen van een tool-tip, verplaatst naar het title-attribuut. Dat is met gecomprimeerde code lastig te veranderen, maar hier is het wel gelukt. Als je de originele code wilt gebruiken moet je een workaround gebruiken. Dat wordt verder op deze pagina nader toegelicht.

Inbouwen in je eigen site

• Download de .zip-file en pak hem uit. Zet de code in je document zoals hieronder is aangegeven.
• Regel een geschikte set foto's of andere afbeeldingen. Alle grafische formaten die een browser kan weergeven kunnen worden ingezet.
  Zorg ervoor dat de foto's allemaal dezelfde afmetingen hebben. Zet de afmetingen in de <img>-tag (height en width). Zet de bestandsnamen in de array fotos. Zet de bijbehorende titels (voor de tooltips) in de array titles.
• Als de foto's in dezelfde map staan als het HTML-document, maak je de variabele fotoPath leeg (lege string). Anders zet je het relatieve pad naar de map met de foto's er in. In het voorbeeld is dat "images/". De slash aan het einde van de string is hier noodzakelijk.
• Behalve het bovenstaande hoeft er aan de HTML en het JavaScript niets te worden gewijzigd.
• De <img>-tag is ingebed in een <div>-tag. Deze dient alleen voor het positioneren van de foto.
• In de originele versie van de code wordt het alt-attribuut veranderd en is het title-attribuut constant. In de versie van het voorbeeld wordt het title-attribuut veranderd en is het alt-attribuut constant.
   
• De animatie wordt gestart met deze code:
  Transitions.fade("#id", bestandsnaam, title, "2");
  De betekenis van de parameters in de aanroep van Transitions.fade() is achtereenvolgens:
  •   id van de foto of afbeelding. Het # hoort erbij!
  •   bestandsnaam (absoluut of relatief pad) van de 'nieuwe' foto of afbeelding.
  •   title-tekst (alt-tekst in de originele versie van het script) van de 'nieuwe' foto of afbeelding.
  •   Tijdsduur van de animatie, in seconden.
  Alle parameters zijn strings. Je moet ze dus tussen aanhalingstekens zetten, tenzij je variabele(en) gebruikt die zelf ook strings zijn.

Workaround voor het <alt>-attribuut

• In het originele script wordt er nog van uit gegaan dat het attribuut alt de tooltip laat zien. In recente is die functie ondergebracht bij title. Bijgevolg wijzigt de tooltip niet meer door gebruik van dit script. Je moet dus wat doen om dit wel voor elkaar te krijgen. Hieronder drie mogelijkheden:
  •  Edit de debug-versie van de JavaScript-code en gebruik die. Wijzig de tekst .alt in .title, 4 × voor elke overgang.
  •  Edit de gecomprimeerde versie van de JavaScript-code, zoals hierboven is genoemd. Meestal gaat dat niet of nauwelijks, maar hier lukt het wel. Deze techniek is gebruikt op deze pagina, in de file transitions-fade-wipe.js.
  •   Gebruik de originele versie van de code, gecomprimeerd of ongecompliceerd. Zet onderstaande regel JavaScript direct vóór de aanroep van Transitions.fade:
  document.getElementById('demofoto').title = titles[fotoSeqNo];
  Deze laatste geeft de mogelijkheid de attributen alt én title tegelijk te wijzigen.

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

<script>
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
var fotos = ["stapeltje_0.jpg","stapeltje_1.jpg","stapeltje_2.jpg",
  "stapeltje_3.jpg","stapeltje_4.jpg","stapeltje_5.jpg",
  "stapeltje_6.jpg","stapeltje_7.jpg","stapeltje_8.jpg",
  "stapeltje_9.jpg","stapeltje_10.jpg"];
var titles = ["Molen","Landschap","Kerkje","Paddenstoel","Veluwe",
"Roze roos",  "Hoogspanning","Wolken","Zonsondergang","Parkje",
"Oranje-gele roos"]
var fotoPath = "images/";
var fotoSeqNo, fotoNoOff, fotoSrc;
window.addEventListener("load", function() {
  fotoNoOff = fotos.length;
  fotoSeqNo = getRandomInt(fotoNoOff);

  document.getElementById('demofoto').src = fotoPath + fotos[fotoSeqNo];

  document.getElementById('demofoto').addEventListener("click",
      function() {
    var aa = fotoSeqNo;
    while (aa == fotoSeqNo) {
      fotoSeqNo = getRandomInt(fotoNoOff);
    }
    aa = fotoPath + fotos[fotoSeqNo];
    Transitions.fade("#demofoto", aa, titles[fotoSeqNo], "2");
  });
});
</script>
<script src="transitions-fade-wipe.js"></script>

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

<div style="text-align:center">
  <img id="demofoto" src="images/pixel-0.gif"
    alt="Afbeelding met overvloei-effect" title="Klik mij, tik mij"
    width="250" height="187" style="cursor:pointer">
</div>

Downloaden:
 
Druk op de knop:  File: voorb628.zip, 8352 bytes.