Ability to view 360 images in Confluence

[Daniel Day]

We started taking 360 view images of our server rooms. We do not want to post the images to the public.

All the ways I can see to view a 360 image would be to use a site like "https://360player.io/".

With those sites you need to upload the image on their site, then you can use a simple code to embed the image on to Confluence. Which this works. But we do not want the image on their site for privacy issues. 

I have also tried "https://www.sitepoint.com/embedding-virtual-reality-across-the-web-with-vr-views/" Google VRView. 

I was able to get this code to work:

<iframe width="100%"
	height="300px"
	allowfullscreen
	frameborder="0"
	src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&
	is_stereo=true">
</iframe>

But when put in the image address from Confluence it will not work. 

Says where the image is stored needs to be cross-origin resource sharing (CORS). Which I do not think Confluence is. 

I have looked through the Confluence Plugins and did not find one for 360 images.

Anyone have any suggestions or working on getting 360 images to work in Confluence?

[David at David Simpson Apps · Accepted solution]

Maybe try something like this:

https://pannellum.org/documentation/examples/simple-example/

<link rel="stylesheet" href="//cdn.pannellum.org/2.3/pannellum.css"/>
<script src="//cdn.pannellum.org/2.3/pannellum.js"></script>
<style>
#panorama {
 width: 600px;
 height: 400px;
}
</style>


<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
 "type": "equirectangular",
 "panorama": "https://pannellum.org/images/alma.jpg"
});
</script>

You could push it into a user macro and host the files on your own Confluence  server.

Because you're loading with JS from your own Confluence instance, there should be no CORS issues.

[Daniel Day]

Yes this worked! TYVM!

Shows the Click to load, after click can see 360 image. 

[David at David Simpson Apps]

👍 👍 👍

[Daniel Day]

Looks like I can only have one per page.

I also got the autoLoad and autoRotate to work. 

But wondering if can get more than one per page. 

If add a 2nd one it will start to load the first one, but then updates to the 2nd one.

[Raphael Renn]

Hi Daniel,

you can have multiple instances of the viewer, you just need to assign each div-container a unique name. You could do this using a parameter like this:

## @param uName:title=Name|type=string|required=true|desc=Panorama-Name (must be unique on this page and must not contain spaces!)


<link rel="stylesheet" href="/pannellum/pannellum.css"/>
<script src="/pannellum/pannellum.js">
</script>
<style>
#${paramuName} {
 width: 600px;
 height: 400px;
}
</style>

<div>
<div id="${paramuName}"></div>
<script>
pannellum.viewer('${paramuName}', {
 "type": "equirectangular",
 "panorama": "/pannellum/photos/360.jpg"
});
</script>
</div>