Responsive Hotspot Size

fel1x

New member
Hello,

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

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

Active member
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:

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

For the full-screen view it would be this:

Code:
.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

New member
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.
 

WebSupport

Active member
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.

Code:
.hotspot_indicator:before
{
   content: "";
   width: 20px;
   height: 20px;
   background: red;
   position: absolute;
   top: -10px;
   left: -10px;
}
Adjust the styles as needed!
 

Attachments

  • 2018-12-06_14-34-57.png
    2018-12-06_14-34-57.png
    82.4 KB · Views: 1,864
  • pixel.png
    pixel.png
    110 bytes · Views: 1,864
Top