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.


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.

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:

In de HEAD

Daar waar de 360 graden foto moet komen in de pagina, ergens in de BODY

Dat zou het moeten doen ! Als het niet zo is, check dan of de absolute en relatieve links allemaal naar de goede plaats wijzen.

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

Als u de 360 panorama foto bij Webwerkplaats bestelt zullen wij de hierboven besproken folder, met UW foto kant-en-klaar aan u leveren via WeTransfer.