Hotspot - Open an image

939 views
Skip to first unread message

Clive Thomas

unread,
Apr 10, 2021, 9:21:22 AM4/10/21
to marzipano
Does anyone have an example of having the ability to click on a hotspot and then open/view an image?

Joost

unread,
Apr 10, 2021, 10:41:43 AM4/10/21
to marzipano
  Hello,

Here is a quick and dirty sample, but can be solved in hundreds of ways. 
Click on the "i" in the statue.

To use this,

add the following to the info-hotspot in data.js;
    "popup": "popup_image.jpg"

add the following to the index.html in the <head> section or add it to the css-file;

.noHover{
    pointer-events: none;
}
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

.modal {
  display: none;
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

add the following to the index.html in the <body> section ;  
  <div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>  

change the function createInfoHotspotElement(hotspot) in index.js;
  function createInfoHotspotElement(hotspot) {
    if(hotspot.hasOwnProperty('popup'))
    {
var wrapper = document.createElement('div');
wrapper.classList.add('info-hotspot');
var header = document.createElement('div');
header.classList.add('info-hotspot-header');
header.classList.add('noHover');
var iconWrapper = document.createElement('div');
iconWrapper.classList.add('info-hotspot-icon-wrapper');
var icon = document.createElement('img');
icon.src = 'img/info.png';
icon.classList.add('info-hotspot-icon');
iconWrapper.appendChild(icon);
header.appendChild(iconWrapper);
wrapper.appendChild(header);

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
wrapper.onclick = function(){
 modal.style.display = "block";
 modalImg.src = hotspot.popup;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
 modal.style.display = "none";
}

return wrapper;
    }
    else
{
// Create wrapper element to hold icon and tooltip.
var wrapper = document.createElement('div');
wrapper.classList.add('hotspot');
wrapper.classList.add('info-hotspot');

// Create hotspot/tooltip header.
var header = document.createElement('div');
header.classList.add('info-hotspot-header');

// Create image element.
var iconWrapper = document.createElement('div');
iconWrapper.classList.add('info-hotspot-icon-wrapper');
var icon = document.createElement('img');
icon.src = 'img/info.png';
icon.classList.add('info-hotspot-icon');
iconWrapper.appendChild(icon);

// Create title element.
var titleWrapper = document.createElement('div');
titleWrapper.classList.add('info-hotspot-title-wrapper');
var title = document.createElement('div');
title.classList.add('info-hotspot-title');
title.innerHTML = hotspot.title;
titleWrapper.appendChild(title);

// Create close element.
var closeWrapper = document.createElement('div');
closeWrapper.classList.add('info-hotspot-close-wrapper');
var closeIcon = document.createElement('img');
closeIcon.src = 'img/close.png';
closeIcon.classList.add('info-hotspot-close-icon');
closeWrapper.appendChild(closeIcon);

// Construct header element.
header.appendChild(iconWrapper);
header.appendChild(titleWrapper);
header.appendChild(closeWrapper);

// Create text element.
var text = document.createElement('div');
text.classList.add('info-hotspot-text');
text.innerHTML = hotspot.text;

// Place header and text into wrapper element.
wrapper.appendChild(header);
wrapper.appendChild(text);

// Create a modal for the hotspot content to appear on mobile mode.
var modal = document.createElement('div');
modal.innerHTML = wrapper.innerHTML;
modal.classList.add('info-hotspot-modal');
document.body.appendChild(modal);

var toggle = function() {
 wrapper.classList.toggle('visible');
 modal.classList.toggle('visible');
};

// Show content when hotspot is clicked.
wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);

// Hide content when close icon is clicked.
modal.querySelector('.info-hotspot-close-wrapper').addEventListener('click', toggle);

// Prevent touch and scroll events from reaching the parent element.
// This prevents the view control logic from interfering with the hotspot.
stopTouchAndScrollEventPropagation(wrapper);

return wrapper;
}
  }

Op zaterdag 10 april 2021 om 15:21:22 UTC+2 schreef clivet...@gmail.com:

Smilingly

unread,
May 3, 2021, 1:35:05 PM5/3/21
to marzipano
hi 
If I want to add a video instead, what should I do?

ในวันที่ วันเสาร์ที่ 10 เมษายน ค.ศ. 2021 เวลา 21 นาฬิกา 41 นาที 43 วินาที UTC+7 joostva...@gmail.com เขียนว่า:

Joost

unread,
May 4, 2021, 5:49:38 AM5/4/21
to marzipano
Hello,

Do you want it embedded in a modal or in the pano itself? (Like in the demo; https://www.marzipano.net/demos/embedded-hotspots/)
If you want to embed it in a modal I would suggest using a javascript-libray to add modals; https://speckyboy.com/free-modal-window-libraries-plugins/
If you want to embed it like on the Marzipano demo website; https://github.com/google/marzipano/tree/master/demos/embedded-hotspots

Let us know what specific way you want to embed it so we can help you.

thx,
Joost


Op maandag 3 mei 2021 om 19:35:05 UTC+2 schreef smili...@gmail.com:

Fabio Tioni

unread,
Aug 5, 2021, 3:49:00 AM8/5/21
to marzipano
Hi! I'm trying to do that but i get black screen every time i update che code. Even doing it step by step.
I placed the code in "index.html in the <head> section or add it to the css-file" but it won't work.
Is there any further guide or tutorial about that?
Can you post the code of your "panorama-rincon-park"? maybe it can help....
Thanks

Message has been deleted

Joost

unread,
Aug 6, 2021, 6:02:31 AM8/6/21
to marzipano
Hi,

Did you put the CSS between <style></style> in the head section?
You can download the demo I made; http://www.qbasiq.com/popup/picturetest.zip
(Make sure you don't just run this locally but from a webserver of from chrome-browser with settings  --allow-file-access-from-files)

Good luck,
Joost

Op do 5 aug. 2021 om 09:49 schreef Fabio Tioni <fabio...@gmail.com>:
--
You received this message because you are subscribed to a topic in the Google Groups "marzipano" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/marzipano/s0kxYcmbAu0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/0f483758-d459-4e51-baa9-9a148aedd456n%40googlegroups.com.

Fabio Tioni

unread,
Aug 6, 2021, 7:39:53 AM8/6/21
to marzipano
Ok thanks, i managed to do that yesterday after a long long session at the pc. I'm not very familiar with html. I even added the possibility to show the label of the hotspot and changed the hotspot icon. 
Do you think that there might be the possibility to link also a pdf file to an hotspot? 
Adding a different hotspot icon? Maybe a pdf that chan be opened in a new tab/window.
Thanks again for your answer.

Joost

unread,
Aug 9, 2021, 4:47:06 AM8/9/21
to marzipano
Hi,

That would definitely be possible. I altered my index.js a while ago to dynamically support hyperlinks as link-hotspots.

Step by step example;
1) data.js; Add the following to the data.js to the link-hotspots
{
          "hyperlink": true,
          "yaw": 0.14232033486180207,
          "pitch": 0.4150298038881548,
          "title": "My link text",
          "link": "http://www.google.com", //you can also link other stuff here, like PDF
          "target": "new", //value should be "same" or "new". This opens a new window or opens the target in the same window
          "icon": "img/magnify.png",  //set my own icon
          "iconwidth": 40,
          "iconheight": 40,
          "iconopacity": "0.7"
} 

2) index.js; change the creation process of  creating Link-hotspots to;
     data.linkHotspots.forEach(function(hotspot) {
      if (hotspot.hasOwnProperty('hyperlink'))
    {        
    var element = createHyperlinkHotspotElement(hotspot);
        scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });  
    }    
    else
      {
        var element = createLinkHotspotElement(hotspot);
        scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch });  
      }
    });

3) index.js; add a function to create the hyperlink
  function createHyperlinkHotspotElement(hotspot) {

    var wrapper = document.createElement('div');
    wrapper.classList.add('hotspot');
    wrapper.classList.add('link-hotspot');

    var icon = document.createElement('img');
    icon.src = hotspot.icon;
    icon.width = hotspot.iconwidth;
    icon.height = hotspot.iconheight;
    icon.style.opacity = hotspot.iconopacity;
    icon.style.cursor = "pointer";
    stopTouchAndScrollEventPropagation(wrapper);
    var tooltip = document.createElement('div');
    tooltip.classList.add('hotspot-tooltip');
    tooltip.classList.add('link-hotspot-tooltip');
    tooltip.innerHTML = hotspot.title;
    wrapper.addEventListener('click', function() {
          if (hotspot.target == 'new')
        window.open(hotspot.link, '_blank');  
          else
      window.open(hotspot.link, '_self');            
        });
    wrapper.appendChild(icon);
    wrapper.appendChild(tooltip);
    return wrapper;
  }


Hope that helps, good luck,
Joost

Op vr 6 aug. 2021 om 13:39 schreef Fabio Tioni <fabio...@gmail.com>:

JD

unread,
Sep 18, 2021, 6:16:07 PM9/18/21
to marzipano
Hello,

I used this code and it allowed me to have multiple hotspots that open an image in one scene, however, it does not work when I try doing it to multiple scenes
I believe it has to do with the index.js  code because the other 3 sections do not interrupt the hmtl file from running. Do you have any suggestions? 

Thank You 

Joost

unread,
Sep 28, 2021, 3:00:41 AM9/28/21
to marzipano
Can you put an example online? Because I can not reproduce the error.

thx,
Joost

Op zo 19 sep. 2021 om 00:16 schreef JD <vsa...@gmail.com>:
--
You received this message because you are subscribed to a topic in the Google Groups "marzipano" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/marzipano/s0kxYcmbAu0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/48a3ed6b-959d-49be-a63d-5b281aaf83c2n%40googlegroups.com.

Jojo Franke

unread,
Feb 27, 2024, 11:01:02 AMFeb 27
to marzipano
Hi, 3 years later i face the same problem. I already tried the suggested code changes, but get also a black screen. Is the example code still around with the embeded image? Or does some one know, where to finde a current documentation for this? Thanks in advance.
Reply all
Reply to author
Forward
0 new messages