Programmeren voor aanraakschermen:
Afbeelding in een <iframe>

Hieronder zie je een deel van een foto. Op een aanraakscherm kun je de foto verslepen door te vegen, zodat je de rest ook kunt bekijken. Het bijzondere is dat de foto in een apart bestand staat, dat weer wordt getoond in een <iframe>.

Op deze pagina wordt beschreven hoe je zoiets maakt. De code van het voorbeeld kun je downloaden, echter zonder de foto. Daar moet je zelf voor zorgen.
N.B.: Het voorbeeld werkt alleen met een aanraakscherm. Slepen met de muis kan dus niet. Zie ook het item Programmeren voor aanraakschermen.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML, CSS en JavaScript.
• De JavaScript-code is een toepassing van de code die wordt besproken in het item Programmeren voor aanraakschermen: Een uitgewerkt voorbeeld en Programmeren voor aanraakschermen: Afbeelding in een viewport.
   
• HTML
• De HTML is verdeeld over drie bestanden, te weten: het document dat je nu leest, een HTML-bestand met de foto en een HTML-bestandje dat een foutmelding verzorgt.
• Dit document (de "parent") bevat een <iframe>, waar het bestand met de foto in wordt getoond (het "child"). In deze site is dat html638a.htm.
• Het gaat fout als er geen aanraakscherm is. Als dat zo is wordt het bestand in het <iframe> vervangen door html638b.htm, dat een foutmelding op het scherm zet. Er zijn dus twee mogelijke "children".
   
• De HTML van de parent is een enkele declaratie van een <iframe>. Behalve de attributen height en width is er ook scrolling="no"; schuifbalken zijn niet gewenst voor deze toepassing.
• Het ´lt;iframe> heeft id="FotoFrame" om html638a.htm te vervangen door html638b.htm met behulp van JavaScript.
   
• De HTML van het eerste child (het bestand met de foto (in dit voorbeeld : html638a.htm)) bestaat uit één enkele <img>-tag, die pixel-0.gif op het scherm toont. Dit is een transparant plaatje van 1 × 1 pixel, dat later door JavaScript wordt vervangen door de foto. De <img>-tag heeft id="FotoInFrame" voor de communicatie met JavaScript.
   
• De HTML van het tweede child (het bestand met de foutmelding (in dit voorbeeld: html638b.htm)) bevat alleen wat tekst.
   
• CSS
• In de beide child-bestanden is een beperkte CSS-reset toegepast, om zij-effecten (zoals onbedoeld verschijnende marges e.d.) te voorkomen.
• De CSS van de foto (#FotoInFrame) heeft position:absolute. Dit is nodig om de plaats van de foto te kunnen veranderen met JavaScript.
• top en left zijn beide ingesteld op -1000px De foto in het voorbeeld is 3072 × 2304 pixels. Bij het laden kom je dus 'ergens' midden in de foto terecht. De waarden van top en left hoeven niet aan elkaar gelijk te zijn en kunnen per foto, afhankelijk van je eigen voorkeuren, worden gekozen.
  top en left worden door over de foto te vegen veranderd door JavaScript.
• De randen om de foto worden onderdrukt door border:0 op te geven.
• Om de beweging van de foto mooi te laten verlopen is transition: all 1.2s ease-out toegevoegd.
   
• JavaScript
• JavaScript wordt gebruikt in het parent-document en in het child-document waar de foto in staat.
• Het parent-document controleert of er een aanraakscherm is. Daarvoor wordt de techniek gebruikt die beschreven is in het item Aanraakscherm detecteren. Dat blijft hier verder onbesproken.
• Vanuit het child-document wordt het bestand swipedetect2.js gelinkt. De werking daarvan wordt uitgebreid besproken in het item Programmeren voor aanraakschermen: Afbeelding in een viewport. Dat wordt hier niet herhaald.
• Voor je eigen toepassing moet je de volgende zaken instellen:
  
  • De bestandsnaam van de foto. Dit moet een volledig pad zijn, relatief ten opzichte van het document, of absoluut (dus met http:// of https:// erbij). Zet dit in PhotoName.
  • De afmetingen van de foto, in pixels. Laat de "px" weg. Zet de afmetingen in imgSizeX en imgSizeY.
  • De afmetingen van het iframe. De waarden moeten gelijk zijn aan de waarden van de attributen width en height die in de HTML-code van het iframe zijn gebruikt. Zet ze in viewSizeX en viewSizeY. Laat de "px" weg.
  • De beginpositie van de foto in het iframe. Hiermee bepaal je de plaats van linker bovenhoek van de foto bij het laden van de pagina. Dit zijn altijd negatieve getallen, of nul. Positie getallen geven een vreemd effect. Zet ze in posXold en posYold. Laat de "px" weg.
  • De versterkingsfactor voor de beweging van de foto ten opzichte van de veegbeweging. Dit is een positief getal, minimaal 1. Bij een foto die veel groter is dan de viewport (zoals in het voorbeeld), zet je de factor hoger dan 1. Hoeveel hoger hangt af van je eigen smaak. Een getal kleiner dan 1 geeft vreemde zij-effecten. Dit getal zet je in factor.
   
• Toepassen in je eigen site
• Regel een grote foto. Bepaal de afmetingen van de viewport (Lees: de afmetingen van het iframe). Bepaal ook waar de linker bovenhoek van de foto zich moet bevinden bij het laden van de pagina.
• Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Wijzig desgewenst de namen van html638a.htm en html638b.htm.
• Pas het JavaScript aan in html638a.htm. Hier voor is genoemd welke variabelen dat zijn. Laat factor nog even onveranderd.
• Nu zou je een werkend programma moeten hebben. Als de foto te weinig beweegt na een veegbeweging, moet je factor verhogen. Als de foto te veel beweegt, moet je factor verlagen.

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 <BODY> van het "parent"-bestand.

<iframe width="500" height="300" frameborder="1"
  src="html638a.htm" scrolling="No">Deze pagina gebruikt een Inline
  Frame. Dat wordt door uw browser niet ondersteund.</iframe> 
 
<script>
    if ("ontouchstart" in document.documentElement == false)
      document.getElementById('FotoFrame').src = "html638b.htm"
</script>

Downloaden:
 
Druk op de knop:  File: voorb638.zip, 2475 bytes.