Image popup with text component

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

Sun Feb 07, 2021 5:10 pm

ImagePopupwithText.gif
ImagePopupwithText.gif (1.07 MiB) Viewed 123 times

Features:
• Can be used with or with description text
• The description textbox has an auto height of up to 120px at which point scrollbars will be seen
• The Hotspot Tooltip position is responsive to Touchscreen devices with moving above the Hotspot Image
• Can be used with the Skin Editors Colour Tool
• Uses Hotspot Type Image



To use this component download and double click to add to Pano2VR’s Components Toolbox.
When added to a skin all you need to do is set up the Point Hotspot.

However you may wish to change the colour of the text box scrollbar, please see below about styling the thumb of the scrollbar.


Adding the point Hotspots

1.png
1.png (101.18 KiB) Viewed 123 times

Select Point Hotspot Viewer mode and double click to add a Point Hotspot.
In the Hotspots properties select Type Image (1)
Select the Skin-ID, this is so this Point Hotspot uses the correct Hotspot Temple in the skin (2)
Give the Hotspot a title (3)
Add your information text using the Description text area (4)
And finally using the open file button select the image it should open (5)


Styling the thumb in the scrollbar to white
While the component has the elements that make up the popup it can not style the thumb colour of the scrollbar. To style this simply copy and paste the code below replacing the default style sheet.

2.png
2.png (128.28 KiB) Viewed 123 times




Copy and paste the following into the Skin Editors Embedded Style Sheet replacing the existing text or just copy and paste the last line.

Code: Select all

.ggskin { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;}
.ggskin ::-webkit-scrollbar-thumb {background-color:  rgba(255,255,255,1);}
Attachments
image_popup_with_text.ggskc
(140.74 KiB) Downloaded 38 times
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/
Post Reply