Navigeer naar verschillende delen van een afbeelding

Bij grote afbeeldingen waar veel op gebeurt, bijvoorbeeld een foto van een drukke straat, kan het handig zijn om de bezoeker van je website bij de hand te nemen en hem/haar langs de interessante punten van de afbeelding te leiden.
Op deze pagina wordt zo'n aanpak besproken. Dat gebeurt aan de hand van een voorbeeld.

Je ziet een deel van een foto met daar boven twee knoppen: "Vorige" en "Volgende". Als je er op klikt verschuift de foto. Op deze manier worden interessante stukken van de foto zichtbaar.

Het voorbeeld toont details van deze foto:

Het hangt af van de grootte van het browser-window welke details je te zien krijgt.
 
In een window van 1920 × 1080 px zijn dat achtereenvolgens:
•  (Alleen bij het starten van het voorbeeld) De grijze lucht, met daarin de dubbele regenboog,
•  De "echte" regenboog,
•  De oprit van een paar huizen,
•  De daken van die huizen en de schuttingen om een paar achtertuinen.
 
In een window van ca. 1000 × 1000 px zie je:
•  (Alleen bij het starten van het voorbeeld) De grijze lucht,
•  Een dubbele regenboog (heel vaag),
•  Een blinde muur,
•  Dezelfde muur maar nu met dak,
•  Een paar andere blinde muren.

Dit is een bewerking van een script dat ik aantrof in Webdesigner Magazine nr. 89 (september 2016), pag. 22 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
Het oorspronkelijke script is niet meer beschikbaar op internet. De maker van het script is niet bij het betreffende artikel genoemd.

Voor deze website is het voorbeeld verfraaid en is de code wat vereenvoudigd. Een klein bugje is gerepareerd.

Deze aanpak is bijzonder geschikt om iets te presenteren op een één-pagina site, waarbij het document het hele scherm vult. Het is heel goed te combineren met een script dat de browser in 'Full Screen'-mode zet. Zie de items Website openen in full-screen mode en Webpagina omschakelen in full-screen modus.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Zelf een site mee bouwen.
   
• De werking van het script
• Het script bestaat uit HTML, CSS en JavaScript jQuery).
   
• HTML
• De HTML is onder te verdelen in twee blokken: De navigatie-knoppen bovenaan het window en de bewegende blokjes die de nummering aangeven. Dit wordt bij elkaar gehouden door een <article>-tag.
• De navigatie wordt geregeld met een <nav>-tag. Daarbinnen zijn twee <span>-tags, waarmee de knoppen worden gemaakt. Om te kunnen communiceren met JavaScript hebben ze het attribuut data-action, waarvan de waarde gelijk is aan de tekst op de knop.
• De foto is de achtergrond van de tag <main>.
• Binnen de <main> bevindt zich voor elk "interessepunt" een <span>-tag, elk met een uniek id. Dat is nodig om de HTML, de CSS en het JavaScript met elkaar te laten communiceren.
• Door op een van de knoppen te klikken wordt de achtergrond van <main> verschoven, zodanig dat de bijbehorende marker in de linker bovenhoek staat.
   
• CSS
• De html, body en het article hebben alle drie dezelfde eigenschappen. Daarmee wordt bereikt dat het effect goed wordt weergegeven in elke browser. Daarbij heeft article ook nog overflow:hidden. De reden daarvoor is niet duidelijk, maar het lijkt wel nodig te zijn.
• main bevat de achtergrond. Door het JavaScript wordt die verschoven als er op de navigatie-knoppen wordt geklikt.
• main bevat ook de (in het voorbeeld zijn het er vier) interessepunten, die naar de linker bovenhoek verschuiven. De plaats van de interessepunten ligt vast t.o.v. main in de id's pointA tot en met pointD.
• Elementen die zich binnen main bevinden (de vier punten) hebben andere eigenschappen dan main zelf. Dat wordt geregeld via main > *
• nav bevat de plaats en de opmaak van de navigatieknoppen.
• Elementen die zich binnen nav bevinden (de navigatie-knoppen) hebben andere eigenschappen dan nav zelf. Dat wordt geregeld via nav > *
   
• JavaScript
• Zodra de pagina is geladen wordt een lijst opgesteld van de "interessante" punten, waarbij de top- en left- posities van de punten wordt opgezocht uit de CSS en de id's in de HTML.
• Een en ander wordt opgeslagen in het objecten locations en actions.
• In actions wordt ook een tweetal methodes gemaakt, actions.Volgende en actions.Vorige, waarin wordt bijgehouden welk punt 'actief' is.
• De animatie wordt ingang gezet door de methode actions.go. Die zorgt ervoor dat de linker bovenhoek van het interessante punt in de linker bovenhoek van de <main>-tag wordt gezet. CSS verzorgt de uiteindelijk animatie.
• Zodra de pagina is geladen worden de twee knoppen bovenaan het scherm aanklikbaar gemaakt. Dat gebeurt door er een event listener aan te koppelen. Die start de methode actions.Volgende of actions.Vorige, afhankelijk van waar op is geklikt. Dit wordt herkend aan de waarde van het data-action-attribuut.
   
• De foto loopt voor een deel uit beeld als de punten te dicht bij de rechter/onderrand komen.Het effect is het mooist als de punten in de linker en de bovenste helft van de foto liggen.
   
• De werking van het script
• Dit is een jQuery-toepassing, dus je hebt JQuery nodig. Die betrek je het beste van een CDN. Het voorbeeld gebruikt versie 1.9.1, dat werkt prima.
   
• Download de .zip-file en pak hem uit. Hernoem de file html534a.htm naar bijvoorbeeld index.html.
• Regel een geschikte afbeelding. Die moet groter zijn dan het grootste beeldscherm waarmee de pagina wordt bekeken.
   
• Kies de coördinaten zodanig dat het echte stuk 'ongeveer' in het midden van het scherm uitkomt. Dat is overigens maar betrekkelijk, want wat je te zien krijgt hang af van de afmetingen van het window.
• Pas de locaties van de punten aan in de CSS. Doe dat in percentages, in de is's pointA tot en met pointD. Voeg naar eigen inzicht punten toe of verwijder ze (er moet er minstens één aanwezig zijn).
• Beperk je tot het aanpassen van kleuren, lettertype, duur en aard van de beweging en de plaats van de navigatieknoppen in het window. Laat de rest ongemoeid.

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="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
var locations = {"data":[], "index":-1};

var actions = {};
actions.go = function(){
  var containerRect = $("article")[0].getBoundingClientRect();
  $("article main").css({
    "left": (containerRect.left-locations.data[ locations.index ].left)+"px",
    "top": (containerRect.top-locations.data[ locations.index ].top)+"px"
  });
}
actions.Volgende = function(){
  if(locations.index < locations.data.length-1)locations.index++;
  actions.go();
}
actions.Vorige = function(){
  if(locations.index > 0)locations.index--;
  actions.go();
}
window.addEventListener("load",function(){
  $.each($('article main > *'),function(){
    var rect = this.getBoundingClientRect();
    locations.data.push({"left":parseInt(rect.left),
        "top":parseInt(rect.top)});
  });
  $.each($('article nav > *'),function(){
    $(this).on("click",actions[ $(this).attr("data-action") ] );
  });
});
</script>

(Zet dit in de <BODY>).

<article>
  <nav>
    <span data-action="Vorige">
        &nbsp;&nbsp;&lt;&lt;&nbsp;Vorige&nbsp; &nbsp;</span>
    <span data-action="Volgende">
        &nbsp;Volgende&nbsp;&gt;&gt;&nbsp;</span>
  </nav>
  <main>
    <span id="pointA">Nr. 1/4</span>
    <span id="pointB">Nr. 2/4</span>
    <span id="pointC">Nr. 3/4</span>
    <span id="pointD">Nr. 4/4</span>
  </main>
</article>

Downloaden:
 
Druk op de knop:  File: voorb534.zip, 1590 bytes.