Als je WordPress hebt is het “inbouwen” van een 360 graden panorama foto eenvoudig te doen met een plugin. Voor HTML sites is het een hele andere methode om een viewer zichtbaar te maken.
Hiervoor maken we dankbaar gebruik van Photo Sphere Viewer van Jeremy Heleine. Je kunt de originele bestanden en een zeer uitgebreide uitleg vinden op Github.
Om het zo simpel mogelijk te houden heb ik de demo van Photo Sphere Viewer ontdaan van alles wat overbodig is.
Laten we starten met wat we willen bereiken. Een foto van de horeca gelegenheid in Fort Pannerden in een HTML pagina. Zie hier het voorbeeld.
Benodigdheden:
1 Folder genaamd photosphere die je in de hoofdirectory (map / folder / root) plaatst van uw website. Een zip bestand daarvan kun je hier downloaden. [wpdm_package id=’12178′]
Ga in de map photosphere naar de map examples. Kopieer daar uw eigen 360 opname (JPEG) naar toe en noem het your360.jpeg (let op de E in JPEG!)
FTP daarna de gehele map photosphere naar de root van uw website.
Test het geheel door de volgende link te gebruiken: http://www.uwwebsite.nl/photosphere/examples/example.html
Okay, dat werkt en dat is mooi maar nu moet het in de bestaande pagina(s) van uw website. Dit vereist kennis van HTML.
Dat zou het moeten doen ! Als het niet zo is, check dan of de absolute en relatieve links allemaal naar de goede plaats wijzen.
Hierboven staat het demo file dat gebruikt is (in het ZIP file zat) Er worden eigenlijk 2 dingen gedaan.
Ten eerste worden er scripts geladen en een stukje CSS in de header. (regel 8 t/m 22)
Ten tweede wordt er een DIV met de naam container opgezet en gevuld door het script daar onder (regel 28 t/m 39)
Dat moeten we dus ook aanbrengen in de bestaande pagina van uw website. Stapsgewijs dus:
Maatwerk ?
Dat kan. Maten, kleuren, de overlay aanpassen. Het kan allemaal. Kijk ook eens op de Github pagina.
De meest voorkomende zal zijn de maat veranderen. Dat doe je met de CSS in de HEAD sectie