Figuur in een Viewport (Draggable Content)
Hieronder zie je een deel van een foto. Je kunt de foto met de muis verslepen, zodat je de rest ook kunt bekijken.
Op deze pagina wordt beschreven hoe je zoiets maakt.
N.B.: Het voorbeeld werkt niet met aanraakschermen. Swipen kan dus niet. Zie ook het item
Programmeren voor aanraakschermen.
De code en de foto van het voorbeeld kun je downloaden om zelf te gebruiken.
- Dit is een bewerking van een voorbeeldscript door Tech.pro, v/h 'Switch On The Code'. Deze site is inmiddels uit de lucht.
- Opmerking: De term "viewport" die hier gebruikt wordt, is niet zo gangbaar in de wereld van webdesign.
Daar gebruikt men gewoonlijk de term "container".
In dit geval is de term viewport toch beter. Viewport betekent weergaveplaats: Je kijkt als het ware door een kijkgat naar iets wat (gedeeltelijk) verborgen is.
- Er worden twee items besproken:
- De opbouw van het script.
- Inbouwen in je eigen site.
- De code bestaat uit JavaScript en HTML, aangevuld met wat CSS.
- Het verslepen van de foto wordt geregeld door het script in de file draginviewport.js. Die link je in de <HEAD>. Je hoeft daar niet in te wijzigen.
- Dit script definiëert de objecten Position en dragObject. Samen met een paar functions die de mouse-events
afhandelen, regelen die het verslepen van de foto.
- Op de plaats waar de viewport moet verschijnen, zet je de blokken CSS en JavaScript neer, zie onderaan de pagina. De volgorde is belangrijk: Eerst de CSS, daarna het JavaScript.
- De CSS bevat een aantal eigenschappen die je naar eigen smaak kunt aanpassen. Andere eigenschappen moet je beter niet veranderen,
zie de tabel:
CSS-eigenschap In <div id="containerBox"> position:relative; Ongewijzigd laten.top:0;
left:100px;Hiermee kun je de viewport precies op zijn plaats zetten. Meestal zul je top:0 niet veranderen. Met left zet je de viewport nauwkeurig in het midden (zoals op deze pagina).border:1px solid black; Dit kun je aanpassen naar eigen smaak. De border helemaal weglaten kan ook, maar dat staat meestal niet mooi.width:400px;
height:300px;De breedte en hoogte van de viewport kun je naar eigen inzicht instellen. Zorg er wel voor dat de viewport kleiner is dan de foto, anders gaat het effect verloren.overflow:hidden; Ongewijzigd laten.CSS-eigenschap In <img id="draggableElement"> width:868px;
height:1023px;De afmetingen van de foto stel je hier in. De HTML-attributen "width" en "height" werken hier niet, je moet dus CSS gebruiken.position:absolute; Ongewijzigd laten.top:-350px;
left:-100px;De eigenschappen top en left stel je zo in dat de foto bij het laden van de pagina "mooi" in de viewport komt.
Dit moeten negatieve getallen zijn, of nul. Als je hier positieve getallen invult wordt het effect niet mooi.cursor:move; Je kunt de cursor instellen zoals je wilt. Zie ook het item Cursor veranderen.
Eigenschap cursor ook helemaal weglaten kan ook, maar dan kun je niet meer zien dat de foto 'versleepbaar' is. - In het JavaScript hoef je geen aanpassingen te doen. Het argument van getElementById() moet gelijk zijn aan de id
van de foto.
Hier: draggableElement.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<script src="draginviewport.js"></script>
(Zet dit in de <BODY>, op de plaats waar dat nodig is. De volgorde (eerst CSS, dan JavaScript) is belangrijk; de volgorde dus niet wijzigen).
<div id="containerBox" style="position:relative; top:0; left:100px;
border:1px solid black; width:400px; height:300px; overflow:hidden;">
<img id="draggableElement" src="parkje.jpg"
style="width:868px; height:1023px; position:absolute;
top:-350px;left:-100px; cursor:move;">
</div>
<script>
var el = document.getElementById('draggableElement');
var parent = el.parentNode;
var leftEdge = parent.clientWidth - el.clientWidth;
var topEdge = parent.clientHeight - el.clientHeight;
var dragObj = new dragObject(el, null, new Position(leftEdge, topEdge),
new Position(0, 0));
</script>
Voor de leesbaarheid zijn sommige regels code verdeeld over meerdere regels. In je eigen toepassing zet je die natuurlijk op één regel.
Downloaden:
Druk op de knop:
File: voorb333.zip, 61 541 bytes.
Opmerking:
Opmerking:
Een toepassing voor het presenteren van panoramafoto's is beschikbaar. Zie: Panoramafotos presenteren II: draggable
image.
