13.7 Bildspel
Detta exempel är en utökning av föregående exempel med en slideshow. Eftersom det nu endast är bilder (och tillhörande bildtext) som visas, kallas det här ett bildspel. Men funktionaliteten och koden för att bläddra är densamma.
Det görs också tillägg, så att man nu även kan zooma och panorera i bilderna. Det är en hel slide (dvs både bilden och tillhörande bildtext) som då påverkas, så zoom och panorering sker av det div-element som en slide utgör.
I del b av exemplet görs även ett tillägg, där man kan välja olika kategorier av bilder i en meny. Dessa kategorier finns som JSON-filer som läses in med fetch och div-elementen för de olika slides i bildspelet skapas utifrån den inlästa JSON-koden. Här utnyttjas samma teknik som togs upp i kapitel 9.
19 min.
Sammanfattning
Bläddring med svep görs med translateX() på samma sätt som i föregående exempel.
Panorering av en bild sker med translate i både x- och y-led på samma sätt som i exempel 13.4 del c. Fast eftersom bilden nu är zoomad, måste man även ta hänsyn till aktuell zoom-faktor.
Zoom kan i programmet antingen göras genom att man drar i ett skjutreglage eller utför gesterna pinch och spread med två fingrar. I båda fallen anropas samma zoom-funktion, där bildens storlek ändras med CSS-egenskapen scale.
Konflikt då man drar
När man trycker ner pekaren och drar finns det en konflikt i interaktionen. Är det då svep för att bläddra eller är det panorering? Lösningen på detta är att zoom kontrolleras. Är bilden helt utzoomad, tolkas drag som att man sveper för att bläddra. Annars tolkas drag som att man panorerar i bilden.
Egna övningar
Ingen övning i detta exempel.