Loading HotSpot Images

[JK76]

Hi there. I'm new with webrotate360 and we've got an enterprise version.
I made a 360° Fotoshooting for a client and put lots of Hotspots on it (actual 19).
The agency who make the website for this 360 want reduce the MB. So they ask me if I could manage it that the images of the hotspots only will loaded if the client click on the hotspot.
I tried an placed one image manually in the "text content" and added a view things in the xml, css and html and it works... But it's not responsive... does anybody have an idea how to do this? I'm a 3D artist - not an it specialist.

Another question - is it possible to use a big version of hotspots for desktop view and a small version for mobile? Or should I generate 2 different outputs from the project file?

Cheerz and thanks for answers,
Jens

 

[WebSupport]

Hi Jens!

To summarize, hotspot content responsiveness is supported out-of-the-box when you use the Image Content tab like you did, or when using both Image and Text Content tabs while having the "lightbox" option checked under "Render as" on the first tab of the Hotspot form, and as you said we then preload the hotspot images upfront which is usually considered a good thing :mrgreen:

If you are using custom html/CSS or JavaScript hotspot API, you essentially take control over the hotspot presentation and would have to manage the responsiveness yourself which may not be very straightforward if you don't have prior experience with web development.

One thought though is that we're about to release a new feature where a 360 product view can be configured to preload just the first product image and pause further image loading with a neat message (you can customize) until user clicks or hovers over the image. Do you think your client would benefit from it such that the number of preloaded hotspot images wouldn't matter then?

 

[JK76]

Hi, thx for your answer.
I have to manage in one Hotspot an image and a video on a given place. And it has to be responsive. I managed it in one resolution but I cannot adjust it, that it will be responsive.

• Hotspot-Icon: I was not really clear with my question - I also have to make the Hotspot-Icon responsive. Because on mobile view they hide the object. I know, that I need in mobile view a bigger hotspot to make a click with my finger but the client want it smaller...

• Preload: It will be a benefit for our custumer to have the choice if you want to preload the hotspot-images or not because I have a specification that the whole first loaded content of the website does not have to transerve 5MB. the COMPLETE website. So I've been told that I have for my webrotate Object only 500KB on the first run. Therefore I'm searching for a possibility to reduce stuff and one point is that the hotspot images shouldn't preload.

With best regards to USA,
Jens

 

[WebSupport]

Hi Jens, apologies for the late reply..

1. Do you think it makes more sense to just not show hotspots on mobile screens as with your extra wide example you shared via email it doesn't make much sense I think (the hotspots will not be clickable or readable exactly).

2. At this time we can only offer your client this new feature where the whole loading is paused after the first "pre-loader" image is loaded. User will have to either hover over the image or click on it to continue loading (there's also a simple/customizable graphical element at the bottom of the view with your custom text that is there to suggest to the user that this is a 360 product view and that they need to click to load it).

PS: we can help with responsive hotspot indicators assuming you really want to show them even smaller on mobile.. If so, please share your SpotEditor project with us (you can email us a download link).