Adding Hotspot Styles to Tours with multiple panoramas

[Tony Redhead]

Hi,

I've spent several hours investigating the implementation of Hotspot Styles for use with Marzipano Tool generated tours. I've downloaded all the sample demo files and I'm comfortable using them with a single multi-resolution panorama but I'm struggling to integrate them into a multi-panorama tour.

In the demo the hotspot holders are defined by divs in the index.html file 

<link rel="stylesheet" href="css/expand.css">

<div id="expand">

<h1 class="title">Human</h1>

  <img class="icon" src="img/human.png" >

  <p> (Homo sapiens primarily ssp. Homo sapiens sapiens)</p>

</div>

<script src="js/expand.js"></script>

that reference a particular .css file e.g. expand.css

#expand {

  width: 70px;

  height: 70px;

  margin-left: -35px;

  margin-top: -70px;

  background-color: #fff;

  color: #000;

  border-radius: 50%;

  text-align: center;

  cursor: pointer;

  transition: width .3s ease-in-out,

              height .3s ease-in-out,

              background-color .3s ease-in-out,

              color .3s ease-in-out,

              margin .3s ease-in-out;

}....

and .js file, eg. expand.js

scene.hotspotContainer().createHotspot(document.querySelector("#expand"), { yaw: 0.525, pitch: 0 });

While in tool generated tours the hotspots are created in index.js file 

function createInfoHotspotElement(hotspot)

defined in the data.js file

"infoHotspots": [

        {

          "yaw": 0.6275712006455834,

          "pitch": -0.23396993647934394,

          "title": "Caldera View",

          "text": "One of the most beautiful views in Yankicha has to be looking down at the caldera from one of the steep hills surrounding it. From the caldera's hillside you can just see the passengers preparing to return to the PONANT ship Le Soléal after exploring the island."

        }

and built in the styles.css file

/* Info hotspot */

.info-hotspot {

  line-height: 1.2em;

  opacity: 0.9;

  transition: opacity 0.2s 0.2s;

}

Can you give me any hints on how to merge the single panorama code into the tool generated code?

regards,

Tony

[Tony Redhead]

Here's a link where you can download a zip of the tours that I've been using to test the Hotspot Styles. http://tonyredhead.photography/360/tutorials/marzipano/expand-examples.zip The first folder is the "Single-Expand-Implemented" where a single expand hotspot is working and the second is "Tour-Expand-Implemented" where I'm trying to get it to work. Unfortunately my knowledge of .js and .css is a little limited.

[Manuel Cabral]

Hi Tony,

To change the info hotspots to look like those on the demo, you would have to change the `createInfoHotspotElement()` function to create an HTML structure similar to that on the hotspot demo. You can then reuse the CSS code on `expand.css`.

Note that the hotspot code that the tool generates has been tested on a variety of browsers and is responsive. The hotspot demo code has not, since it was only meant to showcase the possibilities on modern browsers. So it is possible that the code on the hotspots demo will not work properly on some older browsers or mobile devices.

Manuel

[Tony Redhead]

Hi Manuel,

Thanks for pointing me in the right direction. I might have to consult with some friends of mine who are more savvy with .css and .js than I am (designer with a little dev knowledge). Hopefully I can work it out and post another tutorial.

I'll do some testing on various browsers and see if I can put together a list of what works and what doesn't.

I'll keep you posted. 

cheers,

Tony

[dariocam...@gmail.com]

Hi Tony! I am a designer too, with a little programming expertise too. I have the same questions about those fancy hotspots: Do you manage to solve the problem? Do you change the `createInfoHotspotElement()´ function into some HTML stuff?

Nice to meet you and your work.

Darío.

[Alvaro Murcia]

Sorry for my bad enghish, if you wont change the content of the infoHotspots, in data.js archive you search "text" and write css (style:"..css code....")

 

            "infoHotspots": [

                  {

                          "yaw": 2.9793811141477367,

                          "pitch": 0.044772256991436166,

                          "title": "<div>Información / Information</div>",

                          "text": "<div style='text-align:center'>Visita la promoción en<br><div style='text-align:center'><a href='https://goo.gl/maps/aNusbEXVDyN2' ><img            src='./img/icono%20street%20view.png' class='img-responsive' style='margin:7%'></a><a href='https://goo.gl/maps/FUAfa38t2CR2'><img src='./img/icono%20maps.png'           class='img-responsive' style='margin:7%'></a></div><br><div>Tour realizado por: <br><a href='http://foto360.pro' style='text-decoration: underline'>Foto360.pro</a><br><a   href='https://www.facebook.com/Foto360pro-694169830722536'><img src='./img/icono%20facebook.png' class='img-responsive'></a></div></div>"

                  } 

example http://foto360.pro/CostaCalidaPromotores/PortoMarina/ search infoHotspots, I hope I´ve helped

[Javier Fabian Badillo]

Thanks a lot Alvaro, it was useful!

Regards

Javier