google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
1.99k stars 995 forks source link

Usage of Hotspot-Styles #391

Open mistbug opened 3 years ago

mistbug commented 3 years ago

Hey, I am looking for a solution how can I use the different hotspot-Style like in the demo. But I haven`t found solution for it.

My way, but it does not work:

I put the code in index.html like in the demo:

<link` rel="stylesheet" href="css/info.css">

<div id="info">
  <div class="icon_wrapper">
    <div class="icon">
      <div id="inner_icon" class="inner_icon">
        <div class="icon1"></div>
        <div class="icon2"></div>
      </div>
    </div>
  </div>
  <div class="tip">
    <p>Click to sign up!</p>
  </div>
  <div class="content">
  <div class="image-wrapper">
     <img src="img/marzipano.png">
  </div>
    <div class="content-form">
      <p>Fill the form and we'll open the spam!</p>
      <div>
        <input id="email" type="text" placeholder="Email">
      </div>
      <p>Just kidding, this doesn't do anything</p>
    </div>
    <div class="button_wrapper">
      <button class="close">Close</button>
    </div>
  </div>
</div>
<script src="js/info.js" ></script>

Now it will appaer on the top, left side.

Position If I understand it correctly, the position is managed in data.js. Fot the standard-Hotspot the code is "infoHotspots": [ { "yaw": -1.2122209396321395, "pitch": 0.18553528705164268, "title": "Test", "text": "Text" }] What I have to change? Any ideas? Thanks a lot!

vip3rousmango commented 2 years ago

I'm also curious to see how it's implemented inside the JSON data. Any updates for this?