Information popup with picture and open website button

Post Reply
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
This is an information popup that uses both text and pictures and a URL button to open a website.
The Objective was to only go to one area of the software, hotspot viewer mode and add all the requited information to make this work so you can easily add the popups.

This was almost achieved but the request for a button that would open a website meant that you do need to go into the Skin Editor to add the button and set the URL.

The popup is also responsive using the scaling logic block. It has been set so it starts off with a scale of 1.2. Then when the window is between 1024 and 481px it scales down to 1.0 and when the player width is 480px and below it scale down to 0.6.
Of course these values can be adjusted for your needs and future devices.

Start off by downloading the component and then double click to add to the User-Defined category.

The Open Website button, once the component is added to a skin and under the information container you will see a text box with the ID website_1.
This has a Go To URL action please set the website it will open in the Go To URL action.

Screen Shot 2017-07-02 at 16.48.39.png
Screen Shot 2017-07-02 at 16.48.39.png (54.06 KiB) Viewed 15946 times

To add another button for a different popup copy this and change the ID to website_2.
Under the elements Visibility Logic Block change the logic blocks Value to 2:

Screen Shot 2017-07-02 at 16.50.58.png
Screen Shot 2017-07-02 at 16.50.58.png (34.89 KiB) Viewed 15946 times

Then under the actions change the Go To URL action to point to the next website.

For more buttons just copy the above but changing the ID to website_3 and change the Value to 3 and set what website to open and so on.
Save and close the skin.


Add a Hotspot in the hotspot viewer mode.
Then under the hotspot properties set the following:

Screen Shot 2017-07-02 at 16.55.12.png
Screen Shot 2017-07-02 at 16.55.12.png (106.55 KiB) Viewed 15946 times

Select Type to Image and give it a title.
Use the description text box for the popups body text.
Use the Link Target URL’s blues folder icon to select your image for the popup.
In the Target text field add the number for the open website button you set in the skin.
Example, 1 will open the default website button that comes with the component.

Note if you do not want a website button in one of popups you still need to add a number in the Target text field but you would just not add a button in the skin editor for it to open.

If you are not going to use the website button at all then there is no need for the variable or the website button to be in the skin. Also you can remove the set variable value action in the Hotspot Template and no need to add a number to the Hotspot Target to change the variable.

Regards,
Hopki
Attachments
info_popup_picture.ggskc
(22.44 KiB) Downloaded 910 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
CSeldon
Posts: 5
Joined: Fri Sep 08, 2017 3:43 pm

When I insert this component and follow all the instructions I get an I and the natiel shows up on roll over but no image pop up appears..
Attachments
panoproblem.PNG
panoproblem.PNG (423.27 KiB) Viewed 15366 times
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Did you enter a number in the Hotspots Target text field?
This is required to show the popup.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
soulbrother
Posts: 545
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

just to find this with the forum search funcion, I write the complete term now as text:
info_popup_picture
info popup picture
User avatar
JRumball
Posts: 66
Joined: Wed Jun 11, 2014 10:45 am

Martin,

I am trying to use this component in a project and everything is good except for some reason it is not picking up the hotspot's description text and displaying it as part of the info_text_body element.

I even added the $(hd) placeholder to the text field in the skin and nothing. If I type plain text into this field in the skin instead, it shows properly. What am I missing here?

I should also add, that when I first added the component and tested it, the words "Replace with title of popup" appeared in place of the hotspot's actual title. I fixed that by adding the $(hs) placeholder to the logic block in the text property of the info_title element.

Thanks in advance.

John
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi John,
I need to understand a bit more.
What text are you using that does not show up?
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
JRumball
Posts: 66
Joined: Wed Jun 11, 2014 10:45 am

Hi Martin,

I figured it out from another post or video I saw and from trial and error. :)

I had to add a mouse-click action to copy the contents of $(hd) into the desired text field. Earlier when I tested by just putting the placeholder $(hd) in the text field, the text would only show up in the field during a mouse-over and wouldn't be persistent. But I fixed it now.

Thanks for following up.

John
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi John,
Glad you got it sorted.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply