360 Degree Image Viewer

The following code can be copied and pasted into your blog post to create a 360 degree image viewer. Replace the image file link with the image you wish to display.

I have a insta360 X3 camera that can take 360 degree video and pictures. I plan to include some of those images on the blog posts. I may do some video but they will be posted on YouTube. Video takes up way too much space on my web hosting account.

More examples can be found on the Pannellum web site. If you have any questions, comment below.

Here is a widget with multiple images.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.7/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.7/build/pannellum.js"></script>

// 🔥 Edit Here
<div class="viewer-widget" data-images='[
  {"name":"Living Room","file":"image1.jpg"},
  {"name":"Front Yard","file":"image3.jpg"},
  {"name":"Back Yard","file":"image2.jpg"}
]'>

  <div class="viewer-header">360° Image Viewer - Select Scene</div>

  <select class="sceneSelector"></select>

  <div class="panorama"></div>

</div>

<style>
.viewer-widget {
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.viewer-header {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: bold;
}

.sceneSelector {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    font-size: 14px;
}

.panorama {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
</style>

<script>
document.querySelectorAll('.viewer-widget').forEach(widget => {

  const basePath = "https://meansreport.com/images360/";  // 🔥 Edit Here

  const selector = widget.querySelector('.sceneSelector');
  const panoDiv = widget.querySelector('.panorama');
  const data = JSON.parse(widget.getAttribute('data-images'));
  const scenes = {};

  data.forEach((img, index) => {
    const key = "scene" + index;

    const option = document.createElement("option");
    option.value = key;
    option.textContent = img.name;
    selector.appendChild(option);

    scenes[key] = {
      type: "equirectangular",
      panorama: basePath + img.file
    };
  });

  const viewer = pannellum.viewer(panoDiv, {
    default: {
      firstScene: "scene0",
      autoLoad: true
    },
    scenes: scenes
  });

  selector.addEventListener("change", function () {
    viewer.loadScene(this.value, null, 800);
  });

});
</script>

Here is a simpler one image display:

<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.7/build/pannellum.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.7/build/pannellum.css">
<style>
    #panorama {
        width: 100%;
        height: 400px;
    }
    </style>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg",  // 🔥 Edit Here
    "autoLoad": true,
    "autoRotate": -2
});
</script>

Here is the simple widget:

Here is the multi-image display widget: