Responsive Hotspot Size

[fel1x]

Hello,

recently i'm trying to customize the viewer.
Until now i found solutions for all my ideas , but now i'm stuck

Question:
Is it possible to create responsive hotspots?

When i'm uploading my custom hotspot image (48x48 Pixel) it works perfectly on larger devices. But on mobile devices the hotspot is way to big. It would be nice to resize the hotspot image for smaller devices.

best regards,
Felix

 

[WebSupport]

Hi Felix, good question!

It should be possible to override the hotspot inidcator sizes in your CSS. For the regular view, you would need to override this style:

.wr360_player .container .hotspot_indicator
{
   width: 25px !important;
   height: 25px !important;
   background-size: 25px 25px;
   ...
}

For the full-screen view it would be this:

.wr360_player_fs .container .hotspot_indicator
{
   width: 25px !important;
   height: 25px !important;
   background-size: 25px 25px;
   ...
}

And then use your responsive media queries to configure the desired dimensions depending on screen resolution.

PS: another customization option is to use a 1x1 png as a hotspot indicator and then in your CSS add .hotspot_indicator::before and/or .hotspot_indicator::after to add your own graphics relative to the hotspot pixel.

Does this help?

 

[fel1x]

Hey,

thanks for the super fast reply.

Both possibilities worked!

The first option has a little disadvantage. If i override the size of the hotspot, the origin offset (top and left) from the container doesn't change. Therefor the hotspot is a little bit misaligned.

The second option, with the 1x1 transparent png as an indicator, combined with a ::before element works as intended.

I'll stick the the second option!

Thanks for your help.

 

[pixelmolkerei]

Hi All
Could you send me an example of the second option?
Is this done in the basic.css?
Thank you

 

[WebSupport]

Sorry we missed this question! Here's how it can be done:

1) Use attached pixel.png and add it as a hotspot indicator image for your hotspot. See the screenshot below.

2) Add this custom indicator style before the closing </style> tag in the published html of your 360 product view (under published/your-published-file.html of your project) or somewhere in your website CSS.

.hotspot_indicator:before
{
   content: "";
   width: 20px;
   height: 20px;
   background: red;
   position: absolute;
   top: -10px;
   left: -10px;
}

Adjust the styles as needed!