mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.3k stars 728 forks source link

I can't call pannellum.viewer unless the id is specifically "panorama" #202

Closed awktopus closed 8 years ago

awktopus commented 8 years ago

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 :)

MmmDee commented 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>
mpetroff commented 8 years ago

As @MmmDee demonstrated, there's nothing special about the ID being panorama.

mpetroff commented 8 years ago

Closing due to lack of response from the OP and since this seems to be a non-issue.