Responsive Hotspot Size

CSS styling, controls, custom look and feel, custom packaging and deployment.
fel1x
Posts: 2
Joined: Mon Nov 12, 2018 3:24 am
Location: Hamburg, Germany
Contact:

Responsive Hotspot Size

Postby fel1x » Mon Nov 12, 2018 3:34 am

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
Posts: 897
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Responsive Hotspot Size

Postby WebSupport » Mon Nov 12, 2018 11:56 pm

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: Select all

.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: Select all

.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
Posts: 2
Joined: Mon Nov 12, 2018 3:24 am
Location: Hamburg, Germany
Contact:

Re: Responsive Hotspot Size

Postby fel1x » Tue Nov 13, 2018 4:40 am

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
Posts: 1
Joined: Sat Nov 24, 2018 11:28 am
Contact:

Re: Responsive Hotspot Size

Postby pixelmolkerei » Sat Nov 24, 2018 11:48 am

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

WebSupport
Posts: 897
Joined: Thu Aug 23, 2012 11:35 am
Location: Pasadena, CA
Contact:

Re: Responsive Hotspot Size

Postby WebSupport » Thu Dec 06, 2018 2:42 pm

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: Select all

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

Adjust the styles as needed!
Attachments
pixel.png
pixel.png (110 Bytes) Viewed 21 times
2018-12-06_14-34-57.png


Return to “Viewer Development and Customizations”

cron