Lokaal inzoomen op een foto I

In veel webshops zie je dat: productfoto's waar je op kunt inzoomen op het product goed te bekijken. Op deze pagina wordt getoond hoe je zoiets kunt maken. De ingezoomde foto staat in een apart venster.

De code van het voorbeeld kun je downloaden om zelf mee aan de slag te gaan, echter zonder de foto. 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 diverse webwinkels die dit hebben. Voor deze site heb ik iets nagebouwd wat er op lijkt, gebaseerd op een programmeervoorbeeld op w3schools.com.
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in de file script.js).
• Dit is gemaakt voor een gewoon scherm en een muis. Het werkt ook met een aanraakscherm, maar net iets minder mooi.
   
• De werking van het script
• We beginnen met een voorbeeld. Je ziet een foto. Als je er met de muis overheen gaat, komt er een vierkantje rond de pijl. Naast de foto verschijnt een vergroting van het deel van de foto waar het vierkantje boven zweeft. Als de muis de foto verlaat verdwijnt de vergroting.
• In de vergroting wordt het detail van de foto getoond op ware grootte. De foto zelf staat verkleind in het document.
  De foto van het voorbeeld meet 4000 × 3000 px. In het document is dat 400 × 300 px, dus 10 × verkleind. Daardoor is het detail 10 × vergroot. Het detail is en vierkant van 300 × 300 px. Deze 300 px is de kleinste afmeting van de foto in het document.
• Het meeste werk wordt gedaan door JavaScript: afvangen van de muispositie en tonen van de vergroting.
• Met alleen een aanraakscherm werkt het iets minder mooi: Tik op de foto op de plaats waar je wilt inzoomen. Het vierkantje en de vergroting verschijnen en blijven zichtbaar. Ze verdwijnen door op of naast de vergroting te tikken.
  Soms komt er ook een contextmenu op, dat kun je wegvegen.

Toon het voorbeeld

• HTML
• De HTML van het voorbeeld bestaat uit twee delen:
  •   Een set geneste <div>-tags waar de foto en de vergroting in komen. Deze staat op de plaats waar het effect moet verschijnen.
  •   Een <script>-tag, waarmee het effect wordt gestart. Deze staat aan het einde van de body, net voor de </body>-tag.
   
• De buitenste <div>-tag heeft de klasse wrapper. Deze bepaalt de afmetingen van het effect en positioneert het in de tekstregel.
• Binnen de wrapper staat de <div> met klasse img-zoom-container. Deze dient om de foto en de vergroting bij elkaar te houden. De foto is een gewone <img>-tag met id="myimage" voor de communicatie met JavaScript.
  De vergroting verschijnt in de <div> met klasse img-zoom-result. Voor de communicatie met JavaScript heeft het id="myresult". Deze tag mag geen content bevatten.
• Het vierkantje (de lens) wordt door JavaScript gemaakt als de muis over de foto gaat of als de foto wordt aangeraakt op een aanraakscherm. Dit element heeft de klasse img-zoom-lens.
   
• CSS
• De klasse wrapper bepaalt de ruimte die het effect inneemt het document. In het voorbeeld is dat width × height = 712 × 310 px. De breedte wordt bepaald door de breedte van de foto, wat tussenruimte en de breedte van de vergroting. De hoogte wordt bepaald door de hoogte van de foto, die gelijk is aan de hoogte van de vergroting, plus wat marge.
  De klasse wrapper is relatief gepositioneerd, ander werkt de uitlijning (hier: gecentreerd met margin:0 auto) niet altijd goed. Om links of rechts uit te lijnen gebruik je left:0 resp. right:0.
• De klasse img-zoom-container bevat de foto en is relatief gepositioneerd. Dat laatste is nodig om de lens (het vierkantje) absoluut te kunnen positioneren.
• De klasse img-zoom-lens zorgt voor de opmaak van het vierkantje. Het is absoluut gepositioneerd om het voor JavaScript mogelijk te maken om de positie van de lens binnen de foto te bepalen.
  De afmetingen van de lens zijn 40 × 40 px. Dat kan worden veranderd, zolang het een vierkant blijft.
  De lens zelf is een vierkantje dat zichtbaar is gemaakt met border:1px solid #fff. Dit kun je naar eigen smaak aanpassen.
• De klasse img-zoom-result regelt de opmaak van de vergroting. De positionering is absoluut, om positionering binnen img-zoom-container mogelijk te maken. De afmetingen van de vergroting zijn 300 × 300 px. Dat kan worden veranderd, zolang het een vierkant blijft.
  Bij het laden van de pagina is vergroting niet zichtbaar: visibility:hidden. De vergroting wordt door JavaScript zichtbaar gemaakt of juist weer verborgen tijdens de uitvoering van de applicatie.
   
• JavaScript
• Het JavaScript bestaat uit één enkele function: ImageZoom(imgID, resultID). De parameter imgID is het id van de foto. De parameter resultID is het id van de <div>-tag waar de vergroting in wordt getoond.
• Als eerste worden er vijf variabelen gedeclareerd en ingesteld:
  •   img: Bevat een verwijzing naar de foto via parameter imgID.
  •   lens: Bevat een verwijzing naar de lens. Voor de lens wordt met createElement() een <div>-tag gemaakt die de klasse img-zoom-lens heeft. Dit element wordt in het document net vóór de foto gezet, met img.parentElement.insertBefore(lens, img).
  •   result: Bevat een verwijzing naar de vergroting via parameter resultID.
  •   cx: Bevat de berekende verhouding tussen de breedte van de vergroting en de breedte van de lens.
  •   cy: Bevat de berekende verhouding tussen de hoogte van de vergroting en de hoogte van de lens.
   
• De foto wordt in de achtergrond van de vergroting gezet. Daarbij worden ook de afmetingen van het zichtbare deel van de vergroting ingesteld.
• Tenslotte worden event-listeners gemaakt om de vergroting zichtbaar te maken of juist te verbergen als de muis over de foto gaat of die juist verlaat. Dat gebeurt voor de foto én de lens. De functions zijn visibleResult() en hiddenResult().
  Voor de reactie op de beweging van de muis zijn event-listeners gemaakt voor de foto en de lens. Deze roepen de function moveLens() aan.
   
• moveLens(e) schakelt als eerste reacties uit op eventuele andere events als de muis over de foto gaat. Daarna wordt de positie van de cursor op de foto bepaald met getCursorPos(e). Uitleg over de werking van die function is te vinden in het tweede voorbeeld in het item Plaats van de muis bepalen in het document.
• Voorkomen moet worden dat de lens buiten de foto komt. moveLens() controleert of dat zo is en corrigeert als dat nodig is. Daarna wordt de lens op zijn plaats gezet en wordt de vergroting getoond door de achtergrond van de vergroting te verschuiven.
   
• Inbouwen in je eigen site
• Regel een foto van voldoende resolutie. In het voorbeeld is de foto 4000 × 3000 px, die met 400 × 300 px in het document wordt getoond. De vergroting is 300 × 300 px
• Download de .zip-file en pak hem uit. Hernoem eventueel de file html838a.htm naar index.html of iets dergelijks. Zet bestandsnaam van de foto in de HTML. Je hebt nu een werkend voorbeeld.
• Pas, waar nodig en nuttig, kleuren, afmetingen en andere opmaak aan voor je eigen doeleinden. Houd de afmetingen van de foto in het document in verhouding tot de werkelijke afmetingen van de foto zelf om beeldvervorming te voorkomen. De afmetingen van de lens kun je veranderen, maar de lens zou wel vierkant moeten blijven.

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 het effect moet verschijnen)

<div class="wrapper">
  <div class="img-zoom-container">
    <img id="myimage" src="foto.jpg" width="400" height="300"
      alt="Herfst">
    <div id="myresult" class="img-zoom-result"></div>
  </div>
</div>

(Zet dit helemaal aan het einde van de <BODY>)

<script>
  imageZoom("myimage", "myresult");
</script>

Downloaden:
 
Druk op de knop:  File: voorb838.zip, 2685 bytes.