Lokaal inzoomen op een foto II
In sommige webshops, fotosites, wetenschap-sites, enz., kun je inzoomen op details van foto's met een soort vergrootglas dat op de foto zelf ligt. Op deze pagina wordt getoond hoe je zoiets kunt maken.
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:
- De werking van het script.
- Inbouwen in je eigen site.
- Inspiratie voor dit item is ontstaan door diverse websites die dit gebruiken. Voor deze site heb ik iets nagebouwd wat er op lijkt, gebaseerd op een programmeervoorbeeld op w3schools.com, maar op internet zijn tientallen andere code-voorbeelden te vinden, bijvoorbeeld bij dev.to. Al die scripts werken op dezelfde manier.
- 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 met een cirkel in de linker bovenhoek. Dit is het vergrootglas. Het bevat een uitvergroot deel van de originele foto. De vergrotingsfactor is instelbaar. In het voorbeeld is dat 5 ×.
- Je verplaatst het vergrootglas door te slepen met de muis. Bij een aanraakscherm tik je op de plaats waar het vergrootglas moet komen.
- 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. Het detail wordt in het voorbeeld 5 × vergroot.
- 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.
Soms komt er ook een contextmenu op, dat kun je wegvegen.
- HTML
- De HTML van het voorbeeld bestaat uit twee delen:
• Een set geneste <div>-tags waar de foto in komt. 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-magnifier-container. Deze bevat de foto. De foto is een gewone <img>-tag met id="myimage" voor de communicatie met JavaScript.
- De cirkel (het vergrootglas) wordt door JavaScript gemaakt. Dit element heeft de klasse img-magnifier-glass.
- CSS
- De klasse wrapper bepaalt de ruimte die het effect inneemt het document. In het voorbeeld is dat width ×
height = 400 × 300 px. Deze afmetingen worden bepaald door de afmetingen van de foto. Rondom de wrapper is
wat extra ruimte nodig omdat het vergrootglas gedeeltelijk buiten de foto kan komen.
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-magnifier-container is het vergrootglas en is relatief gepositioneerd. Dat laatste is nodig om het vergrootglas absoluut te kunnen positioneren binnen de foto.
- De klasse img-magnifier-glass zorgt voor de opmaak van het vergrootglas. Het is absoluut gepositioneerd om het
voor JavaScript mogelijk te maken om de positie van het glas binnen de foto te bepalen.
Het vergrootglas is een cirkel met een diameter van 100 px. Dat kan worden veranderd, zolang het een cirkel blijft.
De dikte van de rand wordt ingesteld door JavaScript, omdat die dikte onderdeel is van de JavaScript-berekeningen. De eigenschappen border-color en border-style kunnen worden aangepast in de CSS.
- JavaScript
- Het JavaScript bestaat uit één enkele function: vergrootglas(imgID, zoom). De parameter imgID is het id van de foto. De parameter zoom is de vergrotingsfactor.
- Als eerste wordt de constante bw gedeclareerd. Dit is de breedte van de rand van het vergrootglas. In het voorbeeld heeft deze de waarde 2. De eenheid px wordt door het script toegevoegd.
- Daarna worden er vier variabelen gedeclareerd en ingesteld:
• img: Bevat een verwijzing naar de foto via parameter imgID.
• glass: Bevat een verwijzing naar het vergrootglas. Hiervoor wordt met createElement() een <div>-tag gemaakt die de klasse img-magnifier-glass heeft. Dit element wordt in het document net vóór de foto gezet, met img.parentElement.insertBefore(glass, img).
• w en h: bepalen het middelpunt van het vergrootglas ten opzichte van de foto. - De foto wordt in de achtergrond van de vergroting gezet. Daarbij wordent ook de vergrotingsfactor in rekening gebracht.
- Voor de reactie op de beweging van de muis zijn event-listeners gemaakt voor de foto en het vergrootglas. 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 het middelpunt van het vergrootglas buiten de foto komt. moveLens() controleert of dat
zo is en corrigeert als dat nodig is. Daarna wordt het vergrootglas 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.
- Download de .zip-file en pak hem uit. Hernoem eventueel de file html839a.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 diameter van het vergrootglas kun je veranderen, maar zou wel een cirkel 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-magnifier-container">
<img id="myimage" src="foto.jpg" width="400" height="300"
alt="Herfst">
</div>
</div>
(Zet dit helemaal aan het einde van de <BODY>)
<script>
vergrootglas("myimage", 5);
</script>
Downloaden:
Druk op de knop:
File: voorb839.zip, 2583 bytes.
