How to use the Image Popup component with Polygon Hotspots

[Hopki]

Please see this Example.

The first step is to add the image to the project.
This is done by using the "Assets" as found under the Advanced tab of the HTML5 output. Click the + button and select Add Files or Folders. In this example Add Files.

1.png (22.74 KiB) Viewed 9861 times

When added the images will appear in the Assets list.

2.png (13.09 KiB) Viewed 9861 times

The file path to these images will be assets/ then the file name.
So in this example

Code: Select all

assets/dog.jpg

and

Code: Select all

assets/cat.jpg

You can add a folder full of images then the path will be, for example,

Code: Select all

assets/folder/image.jpg

Add the polygons hotspot to your panoramas.

Change the Polygon Hotspots ID, I am using "IP" (Image Popup) but can be anything.
The ID will be used later in the skin.
Leave type set to URL.
Then set a Title if you want to see a tooltip, example "The Dog".

In the description text field enter the path to the image: assets/dog.jpg

3.png (18.54 KiB) Viewed 9861 times

Open the skin editor and add a container, I am using the ID "Open Image Popup" but it can be any ID you wish.

Now add the Image Popup component from the components toolbox.

Select the Point Hotspot Template "ht_image" and copy its actions:

4.png (44.19 KiB) Viewed 9861 times

Now paste them into the container, "Open Image Popup".
Open the Mose Click Set Value action (1) and change the placeholder to $(hd), (2).

5.png (96.08 KiB) Viewed 9861 times

This placeholder looks at the path in the Polygon Hotspots Description text field.
Finally set up the Hotspot Proxy ID in the container, so under the Advanced tab enter the Polygon Hotspot ID which is "IP".

6.png (20.93 KiB) Viewed 9861 times

Any Polygone that will be used to open an Image Popup will need this ID.
This makes the connection between the Polygon Hotspots and the container.
When you click the Polygon Hotspot the actions in the container "Open Image Popup" will be actioned.
Regards,
Hopki

[George Palov]

Hi Martin,
First thanks for the skin!
I am trying to build one for virtual tou of art galleries, where each photo/painting is with polygon hotspot with tooltip of the name and author. I have some issues with the skin and cannot still figure it out. On desktop when you click the cat or the dog HS, the hotspot image title is still staying where it is until you move the mouse after the popup. Maybe it should be hidden upon mouse click and popup. On mobile on the other hand, the hs title goes to the upper left part of the screen and is even cropped, and goes away when you click somewhere after the popup has appeared.
I would appreciate some insights how to fix this, thank you in advice!
Best, G

[Hopki]

Hi George,
Please see the attached project.
There is a floating tooltip that has modifiers so it follows the mouse.
In the container Open Image Popup, there is also a hide action for the tooltip on click.
Regards,