Ga naar de inhoud
Home » Panorama Viewer voor WordPress

Panorama Viewer voor WordPress

Download de Pannellum viewer source (!!) van https://pannellum.org/

Plaats de Pannellum sources in de root directory van je website:

 

Eigenlijk heb je niet alles nodig. Alleen de examples en src is genoeg. Als alles straks werkt kun je ook de examples weggooien:

Maak een bericht aan in WordPress en plaats daarin (via de text editor, dus ruwe HTML) de volgende twee I-frames:

<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="/pannellum/src/standalone/pannellum.htm?panorama=/pannellum/examples/examplepano.jpg"></iframe>

en eventueel ook

<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="/pannellum/src/standalone/pannellum.htm?panorama=/pannellum/examples/examplepano.jpg&amp;autoLoad=true"></iframe>

En dat ziet er dan zo uit als je je bericht Publiceert en bekijkt:

Nu nog wat uitleg over het I-Frame. We pakken de tweede want de eerste is net iets te simpel (geen automatische load van de afbeelding).

<iframe 
  width="600"                  Breedte van de weer te geven afbeelding is 600 pixels
  height="400"                 Hoogte van de weer te geven afbeelding is 400 pixels
  allowfullscreen              De afbeelding mag fullscreen bekeken worden (knopje in de linker boven hoek van de afbeelding)
  style="border-style:none;"   Geen border er omheen plaatsen
  src="/pannellum/src/standalone/pannellum.htm?panorama=/pannellum/examples/examplepano.jpg&amp;autoLoad=true">
                             De viewer is /pannellum/src/standalone/pannellum.htm gevolgt door het scheidingsteken ? 
                             De foto (panorama) is /pannellum/examples/examplepano.jpg gevolgd door het scheidings teken & (in html heet dat ding &amp)
                             We zetten autoLoad op true zodat de afbeelding meteen geladen wordt.
</iframe>

Als je tevreden bent kun je de examples map weggooien en je eigen plaatjes gebruiken.

Wil je eigen panorama foto’s gebruiken vervang dan in bovenstaande code de groene bestandsnaam. De bestandsnaam moet altijd absoluut zijn t.o.v. de root van je website.

Er zijn nog meer opties:

panorama=/pannellum/examples/examplepano.jpg&amp;title=Jordan%20Pond&amp;author=Matthew%20Petroff&amp;preview=../examples/examplepano-preview.jpg“>

Alle info op de website van Pannellum