Multiple panoramas can be joined together into a virtual tour using Pannellum’s tour feature. A fade animation between scenes can be configured using the sceneFadeDuration parameter. See the hot spots example for more information on placing the hot spots used to navigate between scenes.
<iframe width="600" height="400" allowfullscreen style="border-style:none;" src="https://cdn.pannellum.org/2.2/pannellum.htm?config=/configs/tour.json"></iframe>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tour</title>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.2/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.2/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"default": {
"firstScene": "circle",
"author": "Matthew Petroff",
"sceneFadeDuration": 1000
},
"scenes": {
"circle": {
"title": "Mason Circle",
"hfov": 110,
"pitch": -3,
"yaw": 117,
"type": "equirectangular",
"panorama": "/images/from-tree.jpg",
"hotSpots": [
{
"pitch": -2.1,
"yaw": 132.9,
"type": "scene",
"text": "Spring House or Dairy",
"sceneId": "house"
}
]
},
"house": {
"title": "Spring House or Dairy",
"hfov": 110,
"yaw": 5,
"type": "equirectangular",
"panorama": "/images/bma-0.jpg",
"hotSpots": [
{
"pitch": -0.6,
"yaw": 37.1,
"type": "scene",
"text": "Mason Circle",
"sceneId": "circle",
"targetYaw": -23,
"targetPitch": 2
}
]
}
}
});
</script>
</body>
</html>
Pannellum is developed on GitHub by Matthew Petroff.