Closed awktopus closed 8 years ago
The key is to define a style for each <div>
or change the style to define a class. Naturally, the id of each <div>
must be unique, but simply pass that id into pannellum each time. Using Matthew's "simple example", here it is supporting multiple images....
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</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="pan1" class="panorama"></div>
<div id="pan2" class="panorama"></div>
<div id="pan3" class="panorama"></div>
<div id="pan4" class="panorama"></div>
<script>
v1 = pannellum.viewer('pan1', {
"type": "equirectangular",
"autoLoad": true,
"panorama": "https://pannellum.org/images/alma.jpg"
});
v2 = pannellum.viewer('pan2', {
"type": "equirectangular",
"autoLoad": true,
"panorama": "https://pannellum.org/images/from-tree.jpg"
});
v3 = pannellum.viewer('pan3', {
"type": "equirectangular",
"autoLoad": true,
"panorama": "https://pannellum.org/images/bma-0.jpg"
});
v4 = pannellum.viewer('pan4', {
"type": "equirectangular",
"autoLoad": true,
"panorama": "https://pannellum.org/images/lascar.jpg"
});
</script>
</body>
</html>
As @MmmDee demonstrated, there's nothing special about the ID being panorama
.
Closing due to lack of response from the OP and since this seems to be a non-issue.
I can't call pannellum.viewer unless the id is specifically "panorama," so if I want to create more than one div and use them to show panoramas I am unable to do so.
Thank you! Pannellum is awesome :)