Image popup with text component

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

ImagePopupwithText.gif
ImagePopupwithText.gif (1.07 MiB) Viewed 8936 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 8936 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 8936 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 591 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/
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
There has been a request for an image popup with text and a web link.
So continuing on from the project here is the example: LINK
The text link is found at the bottom of the description text of each popup.

The simplest way to do this is to just add a text link in the text box.
But the default text link colours are not nice so adding CSS to the skin editor's embedded style sheet makes this look much nicer.

The attached project uses white text links that turn yellow on hover.
The project also contains a .txt file that has the replacement CSS for the skin, to make it easier just copy the CSS and replace what's there.
The text file also has what text is being used for all the point hotspots along with the text link code.
Note: the text link will open a new page as it is using target, _blabk
Regards,
Attachments
ImageTextLink.zip
(45.09 KiB) Downloaded 304 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/
Caz1982
Posts: 14
Joined: Tue Aug 11, 2020 9:55 am

Hi Martin, I have a problem with this component, in the project that you have shared everything works fine, but if I want to use it in my skin it gives me this error, some idea why it is giving me this problem in my skin?
Attachments
error.jpg
error.jpg (48.67 KiB) Viewed 6617 times
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Caz1982,
The process is quite straightforward, add point hotspot, then select the image it will load.
So if the image is not loading the only thing I can think of is the image file name has a capital mismatch.
As an example, when viewing locally "image.jpg" and "Image.jpg" will work when Pano2VR is looking for "image.jpg".
But once uploaded "Image.jpg" will not load.
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/
Julien1987
Posts: 1
Joined: Thu Jul 29, 2021 9:59 am

Hello
I apologize this is a translation with google.
Congratulations on all your work, I wish the images were bigger, what are the parameters that need to be changed? Thanks for your help.
Cordially
Post Reply