Lolly Point Hotspot

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

Sun Oct 31, 2021 3:35 pm

@Idocio
As said thanks for the heads up.
This is odd as the image loader is a radius set in CSS and then on a later build in the External Image Loaders properties.
So it's a round element, but still, you see for a brief second the outline of a rectangle?
One for the team I think.
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/
stoffa.c
Posts: 9
Joined: Thu Feb 18, 2021 3:11 pm

Sun Oct 31, 2021 3:52 pm

Hopki wrote:
Sun Oct 31, 2021 3:31 pm
Hi Chuck,
Cool, I link it when people have a play, it helps understand the skin editor.

If you use the full resolution popup image for the preview then you will force preloading the full resolution images on open.
This may not be a good idea if you have a few.

This was why I opted for making small 100 x 100px images for the preview.
Then only when the image point hotspot is clicked do you download the full resolution image.
So downloading only happens when the point hotspot is clicked vs downloading all images on open which could slow down the loading.
Regards,
Thanks for that tip. Good to know. I will adjust my thinking on it then, and create a 150x100 thumb for the preview.

I always try and figure stuff out before seeking your help. I know your time is valuable. Your tech support makes being your customer easy.

Chuck
Idocio
Posts: 36
Joined: Wed Apr 15, 2020 9:26 pm

Sun Oct 31, 2021 4:37 pm

@hopki Here you can see a small video showing the effect in Chrome browser.

https://www.awesomescreenshot.com/video ... a2fc0d6ca8

Hopki wrote:
Sun Oct 31, 2021 3:35 pm
@Idocio
As said thanks for the heads up.
This is odd as the image loader is a radius set in CSS and then on a later build in the External Image Loaders properties.
So it's a round element, but still, you see for a brief second the outline of a rectangle?
One for the team I think.
Regards,
User avatar
Hopki
Gnome
Posts: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Oct 31, 2021 9:20 pm

Hi, thanks for the video.
Yeah odd as the external image loader has CSS radius to make it a circle so is not a rectangle.
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/
Idocio
Posts: 36
Joined: Wed Apr 15, 2020 9:26 pm

Mon Nov 08, 2021 1:54 pm

In the meantime, I have found a solution, using only the options provided by Pano2VR.

You have to make the preview image round, using a transparent PNG.
The container is removed as a mask and the properties are applied to the image object in the skin. It works perfectly and does not cause any artifacts during the effect in Chrome.

Anyway, it would be interesting to know why Chrome renders CSS badly, since your proposal is very elegant and makes it possible to use any image without editing it.
User avatar
stalwart
Posts: 650
Joined: Thu Oct 02, 2008 11:52 am

Wed Nov 24, 2021 3:30 pm

How can I add an outer shadow to the lollipop "ht_mask" using CSS Styles....?
User avatar
Hopki
Gnome
Posts: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Nov 25, 2021 1:00 pm

Hi Stu,

In the skin's tree select the container ht_mask.
Then in the properties CSS Styles add
box-shadow: 2px 2px;
So it looks like:
border: 2px solid white;
border-radius: 999px;
box-shadow: 2px 2px;
You can also add blur:
box-shadow: 2px 2px 5px;
The first setting shifts the shadow to the right
The second shifts the shadow down
The third is how much blur
So you could set
box-shadow: 0px 0px 5px;
This will give an even blur all the way a round.
For more settings see: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
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