Ability to view 360 images in Confluence

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%"

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?

1 answer

1 accepted

1 vote
Accepted answer

Maybe try something like this:


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

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

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.

Yes this worked! TYVM!

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

David Simpson Community Champion Jul 31, 2017

👍 👍 👍

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.

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">
#${paramuName} {
width: 600px;
height: 400px;

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Feb 06, 2019 in Confluence

Try out the new editing experience

Hi team, I’m Avinoam, a product manager on Confluence Cloud, and today I’m really excited to let the Community know that all customers can now try out the new editing experience and see some of the ...

783 views 33 5
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you