How to create pop up window using a button?

    Hello :)

    I am trying to incorporate an "Info Button" on my virtual tour skin, which will have to behave like this:

    • The button will be placed near the navigation buttons, or on the far left/right before the thumbnail button / hide toolbar button.
    • When clicked, it has to show a pop-up window, displaying information about the currently displayed scene
    • When the scene changed and the same info button is clicked, the information should also change in relation to the respective scene.


    How can I create that kind of info button?

    And also, where should the information regarding each scene is stored? Do I have to create a .png files for each scene, or is it possible to put the information of each scene somewhere in the xml files and then call it each time the "info button" clicked?
    I want the pop-up window to be black transparent background and the information is using a white text, is this possible to create without having to create images (containing description) for each scene?

    This is the link to the virtual tour i want to have the info button: http://www.idvr360.com/client/umn/final/

    I don't understand coding very well, so an example would be very helpful :)

    Thank you :)

    - Define additional textfield element similar like you already have to show title name above the buttons.
    - Size it, position e.g. center and color as needed.
    - Add new attribute in your scene definition e.g. info_text="This panorma presents........."
    - When loaded set html of this new plugin reading this new attbibute info_text
    - Add new button in your GUI that will toggle visibility of you plugin.
    (Still not sure this will be nice and easy but can be done. I would still prefere some image based info per scene. Similar as above than not needed textfield but regular image plugin e.g. change url of the info_image for each scene)

    Try exploring your code, examples and try by your self.

    Hello Umalo,

    thank you for your reply :)

    I have (finally :p) able to incorporate your code so it can work with the info button :D

    You can see the result here: http://www.idvr360.com/client/umn/final/

    It is still using the blue info box from your example, but now I just need to create a new info box which suite my clients taste..:)

    Now, another questions related to code at my tour skin (http://www.idvr360.com/client/umn/final/skin/vtourskin.xml ):

    • To close the info box, user need to click / tap the X button. Is it possible that user can click / anywhere inside the box to close it? What code and where should I put the code? :)
    • I want the info button to be visible when viewing on iOS device. Currently, it is visible, but I can't fide which code to change to make it displayed correctly. I have made some changes at <krpano devices="mobile"> section for alternative layout but the button don't change position.
      Code
      <layer name="skin_btn_info"   scale="1" y="0" align="left" x="380" />

      Any clue?


    Thank you :)

    Adapt this in info_box plugin:

    Code
    onclick="set(plugin[info_box].visible,false);"


    and

    Code
    handcursor="true"


    if you want info_box also to capture onclick event and close them self with his child. But than you don't need this x as separate image and elements as whole image will be responsive to onclick.

    Try with ipad simulator to test in iphone view to see how your code for <krpano devices="mobile"> is set.

Participate now!

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

Register Yourself Login