Photo by Carl Heyerdahl

If you haven't noticed, there were two releases of WebRotate 360 Product Viewer that we quietly delivered in 2018. The objective of these releases (v3.6.2 and v3.6.3) was a targeted feature update and a few fixes and improvements for trickier issues that have accumulated in v3.x.

Here's the list of 7 features that we would like to highlight:

  • Viewer loading can be paused on the first "pre-loader" image
  • Zooming is now possible in the full-screen mode
  • Zooming can be triggered on a single mouse click or a touch-screen tap
  • Zooming can be incremental
  • Optional toolbar auto-hide
  • Mouse wheel can be used to spin images
  • Simplified viewer skin with a single control button


Pause on "pre-loader" image

One of the concerns we hear from our users is "how your 360 product views will affect my page loading speed". And while we have several built-in capabilities that take care of the bulk of the issue, there was always the need for the option to not load the entire set of 360 product images until user decides to interact with a spin. It's especially important if you have a portfolio page or a gallery with several embedded spins. Another good case is when you have massive multi-row 3D product spins with hundreds of images.

The feature is optional and can be activated in SpotEditor under Control -> Rotation via "Pause loading after the first image". When it's activated, the viewer downloads a single image that you have selected via "Set current image (row) as first" on the same tab and pauses further loading until user taps inside the view (or hovers over if this option is checked).

If you want to place a small info button at the bottom of the view with your custom text upon presenting the first image, enter some text in the Hint field or leave it empty which can give your web designer some freedom as to how to tell user that there's a 360 product view. Or your web designer can customize our default "hint" styling further in CSS.

Click this image to see an example of a 3D product view consisting of 288 images that pauses loading until user interaction:


Zooming enhancements

WebRotate 360 ® is used on large touch-screen devices at trade-shows, in merchandising mobile apps where showing smaller details is important, in training and education environments where quick and precise navigation to different parts of a 360 object view is required.

With the last two releases we made sure this area of the product is sufficiently improved.

We start with the ability to zoom in the full-screen mode (or full browser window mode, if configured). This is on by default, and as long as your high-resolution images are large enough, a user can zoom-in further while in full-screen as well.

You can control the size of the high-res images under Images -> Tools via the Resize slider:

These high-res images are loaded either on demand when the viewer is zoomed-in or the entire set is loaded when the full-screen mode is activated. The later can be disabled such that you can still show the low-res images that have been already loaded when switching to full-screen. This can be done by unchecking "Use high-res images in full-screen" under Control -> More Options -> Miscellaneous. With the new support for full-screen zooming this presents some interesting opportunities.

Zoom can be incremental. What this means is that your high-res image, while loaded in full as needed, is not shown in its original size upon zoom-in. Instead its split into the number of increments that you can define under Control -> More Options -> Zoom via "Zoom-in increments". Each zoom-in action then increases the image size accordingly. You can pan further and magnify other parts of the image as needed, adding another dimension to your published media.

The other important enhancement is the ability to zoom-in on a single tap or click inside the 360 product spin. You can activate this feature under Control -> More Options -> Miscellaneous via "Zoom on single tap".

Considering how easy the product navigation is when this feature is on (and the new mouse wheel support we discuss below), this should have been our default setting for new projects in v3.6.3. Something we will do in the next release!

Click this image to see an example of a 360 product view that has all three features enabled:

Toolbar auto-hide

The reсent major trend in web design is to "un-clutter" web pages and make the user experience a breeze. WebRotate 360 Product Viewer comes with various skins that feature optional toolbars that sometimes may look overwhelming if paired with a super clean modern product page or a 360 product photography portfolio (remember that you can always customize the toolbars in CSS to match your website look & feel). To follow the trend, we introduced this new feature to let you not show the toolbar until users start interacting with a 3D product view and quietly hide it again when it's not being used for a couple of seconds.

To turn it on, navigate to Interface -> Options and check "Automatically hide toolbar".

Click this image to see an example of a 360 product view with toolbar auto-hide enabled:


Mouse wheel support

At last your web visitors can use their mouse wheel to spin the images. This is especially handy when the viewer is zoomed-in or in full-screen as it nicely complements the panning of a zoomed-in image and / or doesn't directly affect user's ability to scroll the page. Or at least users would expect that page scrolling is blocked as they are exploring the product while zoomed-in. This also doesn't interfere with hotspot navigation if hotspots are present which is the case with the existing setting to spin on mouse hover.

The feature consists of two settings located under Control -> More Options -> Miscellaneous:

1) Rotate on mouse wheel and 2) Mouse wheel when zoomed only. The last setting makes sure that mouse wheel is only active when a 360 product view is zoomed-in or in full-screen to prevent issues with page scrolling.

Click this image to see an example of a 360 product view with the mouse wheel support when zoomed:

New simple Zoom skin

This is another tool at your disposal to deliver simpler & functional user experiences when additional toolbar features are not required. The new skin was designed to go hand in hand with the zooming improvements we discussed above. It consists of a single "full-screen" button that can be placed in various corners of a 360 product view. To place the button at the top, use the new toolbar positioning option "Place at the top" located under Interface -> Styles -> Toolbar align.

Zoom skin is available as two separate skins called "zoom light" and "zoom dark" so you can pick the one that works best with the background of your 360 product photography or website styles. The skins can be selected under Interface -> General -> Skin.

Here's a live 360 product view by Bruno Debiasi from his recent guest post that featurs the new skin as well as some of the other features we discussed in this blog post:

For the first time since 2011 we're raising our pricing next month. Don't wait! Get it now or stay tuned for our first sale event of 2018 that we plan in November, offering 35% off on WebRotate 360 Product Viewer at the current prices. Subscribe to our newsletter below.