Unable to show popup on clicking the hotspot

1st Official Post

    Hello,

    I have created `index.html` page. It has a simple function, which loads the hotspot written in it. The name of the function is function load_hotspots()

    Now I have also added the neded code in it, but the popup is not opening, I just want to open simple HTML code from it.

    Here is the code of my page, I am also attaching the screenshot of page if needed as how it looks.


    Please help so that I am able to open the popup on clicking this hotspot

    • Official Post

    Hi,

    that 'load_hotspot' code isn't very 'optimal'... there are many betters ways to add hotspots via Javascript, but okay, generally it should work.

    But a real problem is this part:

    Code
    // Call the load_hotspots function when the page loads
document.addEventListener("DOMContentLoaded", function () {
    load_hotspots();
});

    The Browsers DOMContentLoaded event has no relation to the time when krpano is loaded is ready.

    Instead maybe try this - in your 'krpano_onready_callback' function add this code:

    Code
    krpano.events.addListener("onxmlcomplete", load_hotspots);

    But note - with this, the load_hotspot function would get called every time when a new pano/scene gets loaded.

    Best regards,
    Klaus

    Thats ok, I changed this but where i need help is, when I am trying to click on the arrow [hotspot] in the image, its not showing me html content in the popup. Can you please help me with the right code here -

    In below code I am adding the onclick and then creating the layer, but why cant I see it on click


    Code
        // Create the layer with HTML content beforehand
    krpano.call("addlayer(infoLayer_hs471720192);");
    krpano.set("layer[infoLayer_hs471720192].html", "<p>This is some HTML code that will be shown when the hs471720192 hotspot is clicked.</p>");
    krpano.set("layer[infoLayer_hs471720192].visible", false); // Initially hide the layer
    • Official Post

    Hi,

    type="text" is missing for the layer.


    When working with JS, you could do that all also more directly - here a different example code for how to make a popup layer and a hotspot showing it:

    Code
    var popup = krpano.addlayer();
popup.type = "text";
popup.text = "... your html code...;
popup.align = "center";
popup.visible = false;
popup.onclick = function(){ popup.visible = false; } 

...

hotspot.onclick = function(){ popup.visible = true; };


    Best regards,
    Klaus

    I am almost crashed. Please add your code in the above function
    function load_hotspots() { } , I believe Then i will be able to understand how to do rest of stuff.


    I want to see, how are you joining it to hotspot hs471720192


    I tried this in the function, but it says Uncaught ReferenceError: hotspot is not defined

    • Official Post

    Okay, forget and remove the different example code...

    I wanted to show a better way to code, but that doesn't mean the example code can be just pasted as it is...


    To add the missing layer type in your case and style, change:

    Code
     krpano.call("addlayer(infoLayer_hs471720192);");

    to:

    Code
     krpano.call("addlayer(infoLayer_hs471720192);");
 krpano.set("layer[infoLayer_hs471720192].type", "text");

    worked, thanks a ton. 1 more thing, how do I set its visible false on clicking the "close" text, see image

    this is the html code -

    Code
        krpano.set("layer[infoLayer_hs471720192].html", "<p>This is some HTML code that will be shown when the hs471720192 hotspot is clicked.</p> <br> <i>Close</i>");

    I added to close and I believe double Quotes are causing the issue -


    Here is the complete line of code -

    Code
    krpano.set("layer[infoLayer_hs471720192].html", "<p>This is some HTML code that will be shown when the hs471720192 hotspot is clicked.</p> <br> <a href="event:set(hotspot[hs471720192].visible,false);"> Close </a>");

    Without quotes has error, with single has no error but it is not working , not closing on click


    here is the code:

    Code
    krpano.set("layer[infoLayer_hs471720192].html", "<p>This is some HTML code that will be shown when the hs471720192 hotspot is clicked.</p> <br> <a href = 'event:set(hotspot[hs471720192].visible,false);' > Close </a>");

    Finally I found the solution::


    Here I have called js function like this:


    Code
    krpano.set("layer[infoLayer_hs471720192].html", "<p>This is some HTML code that will be shown when the hs471720192 hotspot is clicked.</p> <br> <a href = 'javascript:close_box();'> Close </a>");

    and here is my close_box function::

    Code
    function close_box() {
    console.log("clicked");
        // Add your code to execute when the "Close" link is clicked
    // For example, to hide the layer:
    krpano.set("layer[infoLayer_hs471720192].visible", false);
}

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login