Page 1 of 1

Image popup with text component

Posted: Sun Feb 07, 2021 5:10 pm
by Hopki
ImagePopupwithText.gif
ImagePopupwithText.gif (1.07 MiB) Viewed 12443 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 12443 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 12443 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);}

Re: Image popup with text component

Posted: Wed Jul 07, 2021 12:38 pm
by Hopki
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,

Re: Image popup with text component

Posted: Sat Jul 31, 2021 1:40 am
by Caz1982
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?

Re: Image popup with text component

Posted: Mon Aug 02, 2021 1:54 pm
by Hopki
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,

Re: Image popup with text component

Posted: Wed Aug 04, 2021 11:57 am
by Julien1987
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