Panoramafotos presenteren II: draggable image

Als je foto's laat afdrukken bij een afdrukautomaat, ontwikkelcentrale of fotograaf kun je kiezen uit een aantal standaardformaten. Zo zijn er bijvoorbeeld 10 x 15 cm (2:3; ouderwetse fotorolletjes) of 9 x 12 cm (3:4; digitale camera's).
Met sommige typen digitale camera's kun je ook panorama-foto's maken. Dan zijn foto's met extreme lengte-breedte verhoudingen, bijvoorbeeld 9 cm hoog en 40 cm lang. Er bestaat ook software waarmee je een aantal overlappende gewone foto's aan elkaar kunt 'plakken', met een panorama-foto als resultaat.
Hieronder zie je (sterk verkleinde) uitvoering van zo'n foto.

Thumbnail van panorama-foto

Het tonen van dergelijke foto's met HTML, CCS en JavaScript is eenvoudiger dan het lijkt, omdat het versleepbaar (draggable) maken van een foto met CSS kan worden ingesteld.

Op deze pagina wordt een methode gepresenteerd waarmee je panorama-foto's kunt laten zien op je website, waarbij gewerkt wordt met een draggable element.
Dit is een vereenvoudigde versie van het panorama-album dat je vindt op mijn foto-website: www.webmasterij.nl/fotoalbum/. Klik door naar Album 3.
Het werken met een draggable element wordt uitgelegd in het item Figuur in een Viewport (Draggable Content).

De code kun je downloaden voor toepassing op je eigen website.

Panorama-foto's zijn er in twee soorten: Foto's die een volledige cirkel beschrijven (360°-foto's) en foto's die alleen een heel breed (of hoog) formaat hebben. Deze pagina behandelt alleen de "breedbeeld"-foto's.

Als je op de knop Voorbeeld drukt verschijnt er een lijstje miniaturen. Als je op zo'n miniatuur klikt wordt de foto in een venster van 700 bij 400 pixels getoond. Je kunt de foto in het venster verslepen met de muis.
N.B.: Het voorbeeld werkt niet met aanraakschermen. swipen kan dus niet. Zie ook het item Programmeren voor aanraakschermen.

Gebruik:

Downloaden:
 
Druk op de knop: Download deze code  File: voorb362.zip, 39 746 bytes.

 
terug

html-362; Laatste wijziging: 7 maart 2022