Blog | WebRotate 360 | Page 2

Installing SpotEditor on Mac OS X El Capitan (version 10.11)

by NewsMaster October 07, 2015 12:32

If you got brand-new Mac OS X El Capitan v10.11 (released on 30th of September 2015), you will need to temporarily disable El Capitan's new "rootless" mode before installing required Mono Framework and X11 as follows:

1. Restart your Mac and hold down Command-R on the keyboard while booting to enable recovery mode.
2. Once booted in recovery mode, navigate to Utilities > Terminal in the top menu bar.
3. Enter csrutil disable in the terminal window and hit the return key on your keyboard.
4. Restart your Mac again.
5. Install Mono Framework and X11.
6. Re-enable "rootless" mode by going through steps 1 to 4 and entering csrutil enable in the terminal window in step 3.


PS: If you had SpotEditor installed prior to upgrading to El Capitan, you will have to go through the same steps as El Capitan breaks prior installations of Mono Framework and X11.


X11 can be downloaded from here:

Mono Framework 2.10.9_12 is included in our free and pro Mac downloads as MonoFramework-MDK-2.10.9_12.macos10.xamarin.x86.dmg


Bookmark and Share

Free Responsive E-Commerce Template

by NewsMaster September 25, 2015 12:57

Here's a great e-commerce template we would like to share with our followers. We prepared it for one of our clients recently but you may find it useful as well.

It was made super responsive (try resizing your browser once it's loaded) to look nice on desktops, tablets and phones, and includes our in-place reloading feature that loads 360 or 3D product views without page refresh. We don't have anything similar in SpotEditor yet, so you may grab the template below and convert it for your needs. Upcoming v3.6 release will have it integrated as an extra publishing template inside SpotEditor.

Click this image to see it in action and download below:

Ecommerce template with in-place reload



To use this template for your own projects, please follow these steps:

  • Publish your SpotEditor project as usual.
  • Copy a single folder that you will find under published/360_assets in your SpotEditor project directory to 360_assets next to view1, etc in the root of the template.
  • Open template's sample.html for edit and scroll down to the JavaScript section around line 163.
  • You will see that the initial 360 product view is currently pointing to the following viewer config file: 360_assets/view3/view3.xml. You can replace this path with yours accordingly.
  • The same view3.xml is then loaded again if user clicks on the third thumbnail, so you can again replace the second reference to "360_assets/view3/view3.xml" with your own xml path for your initial 3D view.
  • Then replace the other two xml references inside apiObj.reload(...) with your own xml path for the first an second thumbnails.
  • Replace thumb PNG files in the root of the template folder (we provided a Photoshop PSD file to help with the preferred image dimensions if needed).


If any questions, just let us know!


The template uses one of our recent stable v3.6 beta builds so you may notice a couple of new things with this template:

1. New responsiveMinHeight setting that you can see in sample.html. This setting was just introduced in v3.6 to make mobile views look better. It allows to configure a minimum viewer pixel height, making sure there's enough padding space for 360 product images when the viewer resizes itself to fill your scaled web pages on small mobile screens.

2. New bounceRows flag under rotation element in view1.xml designed for 3D product views that controls whether to loop through the vertical rows when you drag images vertically or bounce at the first or last row if your 3D CAD renderings or 360 product photography doesn't have a full set of rows to cover all angles in a vertical spin. We were bouncing rows by default in the previous v3.6 beta releases and there was no way to change the behavior.. So now if you manage to export enough 3D rows to cover a full vertical spin, it will work (full 3D at last, yay!)

3. New flipHorizontalInput flag under rotation element in view2.xml which makes images spin in an opposite direction to mouse & touch drag. Note that we already had the rotateDirection flag that would make this possible, but it would also affect the playback direction and the arrow buttons accordingly. This was not good enough for one of our clients who is involved in 360 bullet time-lapses in that they needed the playback direction to work separately from the drag so that they could preserve the original order in which the images were shot. It's mind boggling, but we had to do it :)

So when the new v3.6 build is released, hopefully in the next few weeks, these settings will be available inside SpotEditor user interface (among a few more new features!).

PS: if you decide to integrate this template into some ecommerce site or your ecommerce demo, it may be more useful to reload the views at the same image position to make color changes and similar look nicer. Here's how you could change a single line in sample.html to reload a view at the same image index as currently shown:

apiObj.reload('360_assets/yourview/yourview.xml', null, null, apiObj.images.getCurrentImageIndex()); // instead of just apiObj.reload('360_assets/yourview/yourview.xml').


Bookmark and Share

WebRotate 360 Product Viewer Integration with Squarespace

by NewsMaster August 17, 2015 11:18

Squrespace is a popular hosted website builder and CMS featuring slick dashboard and modern themes. It has been attracting lots of creative folks and commercial photographers. Even small ecommerce shops driven by this modern CMS are now popping up here and there.

And while Squarespace is still lacking support for third-party plugins in the way WordPress does, for example, we now have a new integration option for Squarespace that looks similar to the embed shortcode we have in our WordPress and Joomla plugins. The only requirement is having a place online where you can upload your published 360 or 3D product views as Squarespace's file hosting storage is currently very limited. Luckily, today having a spare 5-10 GB of web hosting space doesn't cost much and there're plenty of options.

Lets review step by step how to integrate your published webrotate 360 product views in Squarespace.


1) Publish your 360 product view using WebRotate 360 SpotEditor that you can download here. Here's a quick video that walks you through the basic steps.

2) Upload the contents of the 360_assets folder that you will see in the published folder under your SpotEditor project directory (or wherever you have chosen to output your published 360 product view) to your web hosting. You can upload it right away on publish in SpotEditor using our built-in FTP option (check "Upload assets only") or use a popular FTP client such as FileZilla or a browser based file manager that comes with your web hosting.

3) Once uploaded, note the location of the xml file inside the uploaded folder
(e.g You'll will need this file's URL for the next steps.

4) Login to Squarespace and expand a page where you would like to integrate your published view.

5) Click Settings to configure this page and then select Advanced. Paste the following lines under Page Header Code and click Save.

<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>

Note 1: you may not need the first line (jQuery script) as your Squarespace theme may already include it. You may also replace retina.css with your viewer skin of choice (e.g, basic.css, thin.css, empty.css, round.css).  

Note 2: if you don't want to paste these scripts on every page where you add your 3D product views, you can simply paste them under Code Injection->Header in your Squarespace Settings if you navigate to Settings->Advanced->Code Injection.

6) Add a new Squarespace Code block onto the page and click small </> icon on the right to expand the Embed Data field. Then paste the following under Embed Data and replacing the URL next to "xmlfile" with the one your have uploaded in the previous step and then change width and height to look good inside your page layout.

<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{"xmlfile":"http://your-config-url.xml"}'></div>

PS: there're a few options that you can configure in the last step. Below is an example with all of the available options listed in one place:

<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{
    "graphics": "",
    "basewidth": 1024,
    "minheight": 400
    "events": true,
    "name": "my-view",
    "rootpath": "",
    "onready": your-javascript-callback}'>

  • basewidth - viewer width in pixel that you can set to allow the viewer window to scale not just horizontally, which works by default if a parent container has relative width, but also vertically as well. It usually represents your default viewer width as per your base (default) page layout design before any responsive scaling is applied. When it's set, the height of the viewer is automatically scaled relative to the scaled width.
  • minheight - if basewidth is specified, this setting represents the minimum viewer height in pixel. This can be helpful on small mobile screens where you may not want the viewer window height go beyond some fixed minimum. 
  • events - set it to true if your website has Google Analytics integrated and you would like to track user engagement with your 3D product views as per this recent article on our blog.
  • name - if specified, this name will appear in your Google Analytics event tracking so you could sort out the events by each view. 
  • rootpath - if you host images on a CDN server or if you need to have a single xml config for all of your 360 views, you can configure the image location using this path. Please find more details in our user guide under API / rootPath.
  • graphics - absolute path to a folder with hotspot indicator images (if you use hotspots!). Note that we share all of the skin folders that include default hotspot indicators via our CDN (Amazon S3) so this path will work, and you can replace retina with basic, empty, round, thin, though they currently have the same hotspot images.
  • onready - pass your JavaScript API callback that accepts one parameter being our API object. Please refer to our user guide under API / apiReadyCallback for more details about various functions we currently offer via this API.


Bookmark and Share

New WordPress Plugin With Full 3D Product Views and Native WooCommerce Integration

by NewsMaster July 06, 2015 12:48

Today we're releasing our completely reworked WordPress plugin (stable Beta v3.0) with several major features and enhancements as discussed below. You can download the new plugin using this link:


Multi-row / 3D Product Views

This new capability was introduced in v3.6 beta software & viewer in February 2015 (details). It's now used in production quite effectively by several companies and studios and we are pretty happy with it in our own testing as well.

So far we have been offering help upgrading existing CMS plugin installations manually to help our users start using the new full 3D viewing capabilities along with a couple of extra v3.6 features. With this WordPress plugin rewrite, we packaged the latest release of v3.6 product viewer into the plugin itself, so no more manual file updates!

To take advantage of this feature, just download our latest v3.6 beta software here (or request PRO version if you are our past customer) and then create and publish your 3D product views as discussed here and here. The rest of the WordPress shortcode integration remains exactly the same as in the previous versions of the WordPress plugin. You can learn more about the shortcodes on our new page here.

Native WooCommerce Integration

Until now, our WooCommerce integration was limited to just the content fields such as product descriptions. This new version of the plugin includes native WooCommerce integration, making it possible to embed your 360 or 3D product views directly in place of the main product image on your WooCommerce product pages. This is accomplished via an extra tab that is automatically presented in your WooCommerce product admin as shown below:

3D product views in WooCommerce


There are just two fields where you can configure your Config File URL as well as RootPath. Config File URL is a path to the viewer XML configuration file on your server for corresponding product view. This xml file is automatically created under each product view on publish using our desktop software. Root Path is optional and it's only required when you host the actual 3D product images on an external server or CDN. Config File URL as well as the Root Path setting are the same as shortcode's config and rootpath parameters respectively and are discussed here.

WooCommerce integration uses several defaults from the WebRotate 360 Settings page, including viewer dimensions, responsive width, skin, as well as Master Config URL that you might use to have a single config file (xml) for all of your product views. When Master Config URL is specified, you only need to use RootPath under each product to point to a folder with the actual product images (the one that contains the "images" subfolder under your published view under 360_assets) on your server or CDN.

360 product viewer settings in WordPress

Since WooComemrces comes with its own version of the prettyPhoto library that it uses for image zooming, we have another WooCommerce specific checkbox on the settings screen to allow disabling prettyPhoto that comes with our plugin if there're any conflicts.

Google Analytics Integration

This is the first plugin with our integrated Google Analytics events which were introduced recently in v3.6. It allows tracking user engagements with your 3D product views as described here. So if your WordPress installation already has standard Google Analytics tracking hooked up, just check Use Google Analytics on the settings screen as shown above to enable tracking of the various viewer events.

Track various 3D product viewer events in Google Analytics

New wr360expand Shortcode

This shortcode is configured in exactly the same way as wr360popup as described here minus width and height parameters. Unlike wr360popup, this new shortcode (wr360expand) opens up your product views in full-screen directly or full browser window if configured in the published view, bypassing the small popup.


Bookmark and Share

New v3.6 Beta Release (Build Now With Google Analytics!

by NewsMaster June 10, 2015 10:26

We're happy to announce that the new build of WebRotate 360 Product Viewer v3.6 beta is now available for download. This time, it's primarily to give our PRO users an early access to our new Google Analytics integration that makes it possible to fully track user engagement with your 3D product views using your standard Google Analytics dashboard.

To access this integration, click on the small button next to the Template drop-down on the Publish form as shown on the screenshot below.

Enable Google Analytics Events

Then check the first box to enable Google Analytics events for this project. If needed, you can also change the name of this project for the purpose of tracking this product view inside Google Analytics. This name becomes an event label that you will see once your start browsing WebRotate 360 events in your Google Analytics dashboard (GA dashboard) and will allow you to filter all WebRotate 360 events by product view.

Here you can also check to add Google Analytics tracking script to your published html template automatically on publish. This will require a tracking id which is a code that is automatically assigned to any web property in your GA dashboard. This tracking id usually looks like this UA-XXXXXXX-X and can be accessed either on the Home page of your Google Analytics (next to the website / property name in the list of properties) or via the Admin page under the Property settings.

Google Analytics Integration Options

When Tracking ID is configured as shown above, your published html will include standard Google Analytics tracking script, so once the published files are uploaded online, you can start testing the integration right away. If you are integrating your published product views with a website that has the Google Analytics script already hooked up, adding the tracking script and the id as shown on the screenshot is not necessary (it's there mostly for quick testing or when you need to embed the 3D views via iFrame).

Note that our Google Analytics integration will first check if the standard Google Alanytics script is present on the same page where the viewer is loaded and if it doesn't find it there, it will try to access the script from a parent page if available. This allows integrating the Google Analytics tracking even when your 3D product views are embedded elsewhere via an iFrame.

Lets review the types of events that are now available for tracking WebRotate 360 user engagement in your GA dashboard.

All WebRotate 360 events are categorized under WebRotate360 category so once your published project is live, you can start browsing events that belong to this specific category (i.e, WebRotate360). These events will show either under the Real-Time tab of your GA dashboard (under Events) or via the Behavior tab as shown below which doesn't show real-time results but has more event details and more options for event filtering and navigation.

3D product viewer user engagement in your Google Analytics dashboard

There are currently 11 event (action) types that are being tracked in WebRotate 360 Product Viewer. Some of these events also include associated time value (in milliseconds) to give you more context for understanding how users engage with your product views. These extra time values give you a valuable quantitative measure of user engagement that directly corresponds to the time spent on a webpage while navigating interactive product views. All of these events also include event label that you can see and update on the Google Analytics form in SpotEditor for each of your product views as noted above.

Fired every time a 3D product view is loaded in full. Includes the number of milliseconds it took for the 3D view to load in full.

Same as ViewerLoaded but this event is fired when a product view is reloaded in-place using either our API or corresponding hotspot action (i.e hyperlink action pointing to an xml file).

Fired when user moves mouse cursor outside of the 3D product viewer or when the user starts dragging images with the left mouse button depressed or when a hotspot popup is activated.
This event also includes the number of milliseconds that user spent hovering over the 3D product images. Note that the ImageHover event doesn't fire on mobile devices with touch screens.

Fired when user stops dragging the images with either mouse or touch. Includes the number of milliseconds that the user spent dragging the images.

Fired every time the toolbar Zoom button is clicked (on zoom-in only) or when the zooming function is triggered via double-click / double-tap. It's also fired when zoom-in is activated via API.

Fired every time the toolbar Playback button is clicked (on playback start only) or when the same function is triggered via API.

Fired every time the toolbar Arrow buttons are clicked (left, right, up or down) or when the same functions are triggered via API.

Fired every time the toolbar Full-screen button is clicked (on full-screen activation only) or when the same function is activated via API.

Fired every time the toolbar Hotspot On/Off button is clicked or when the same function is triggered via API.

Fired when user deactivates a hotspot popup that he / she just activated via tap, click or mouse hover. This event also includes the number of milliseconds that user spent reading or browsing
the content of the hotspot popup.

Fired when user clicks on a hotspot popup that has a hotspot action assigned (i.e hyperlink action, label action, etc).

Our CMS and eCommerce plugins are being updated right now to seamlessly integrate with the new Google Analytics events so very soon all you would need to do (in your WebRotate 360 plugins for WordPress, Magento, OpenCart, etc) is to check a singe box in your plugin dashboard to enable the same analytics. The rest of the wiring is implemented inside the plugins such as event label assignment based on product SKU or shortcode and similar.


Previously released features and fixes in v3.6:


PRO & Enterprise customers can either request the commercial version of v3.6 Beta via support email (support at webrotate360 dot com). If you received v3.6 beta download URL from us before, it still works! And if you already have the previous build of v3.6 beta installed, you can simply download the new update via Check Updates on the About form in SpotEditor.

If you need any help applying this update to any of WebRotate 360's plugins (i.e, WordPress, Joomla, PrestaShop, Magento, OpenCart, BigCommerce), please let us know and we would be happy to assist.


Bookmark and Share

New Post About 360 Product Photography Of Glock Handguns

by NewsMaster May 26, 2015 11:06

Check out our latest blog post on It's about one of our more "special" 360 product photography projects that our team has been involved with for a period of two years, photo shooting pistols (in 360 degrees!) for Glock USA.

It was pretty memorable to the say the least. But we have learned a lot too - from renting studio space in LA for handgun photography to building exhaustively consistent 360 product photography setup on location from scratch every 6 months..


Bookmark and Share

Security Patch for Our CMS Plugin Users

by WebRotate 360 May 20, 2015 12:36

We have been informed yesterday that a third-party JavaScript library that we use for our "light-box" popups in some of our CMS plugins has a security issue that has just been fixed by its developer a couple of days ago.

If you are currently using WebRotate 360's CMS plugins with any of these platforms, we urge you to apply this patch as soon as possible:

  • WordPress
  • Joomla
  • Magento
  • OpenCart (v2.0 and up)
  • PrestaShop (v1.6 and up)

Here's how to apply the patch for each of these platforms:

  • Download patched file here.
  • Unzip jquery.prettyPhoto.js.
  • Copy jquery.prettyPhoto.js via FTP over the existing file with the same name on your CMS site as follows and refresh your CMS cache (if any is enabled):






PS: our plugins are being updated as well to incorporate the patch but these simple steps above would be the easiest way to apply it now.


Bookmark and Share

Download New v3.6 Beta Release (Build

by NewsMaster April 27, 2015 11:28

We had a lot of great feedback on the first v3.6 beta release last month which helped improve v3.6 in a number of ways. If you haven't heard, v3.6 is all about full 3D / multi-row product views! So today we're making another release available with some of the feedback incorporated along with a couple of new features and enhancements:


Full image / row management under Images->Rows

The ability to add, remove and order images, have been on our feature request list since the first release of WebRotate 360 Product Viewer and became even more important in v3.6 with the introduction of full 3D product rotation via multiple image rows. This took some time to implement but at the end we really liked the flexibility of the new feature. New options are neatly arranged under the image list located on the Images -> Rows tab as you can see below:

The options are as follows:

  • Add arbitrary number of new rows (note that the first row is always present in an empty project and can't be removed.
  • Add new images to the end of the current row or immediately after currently selected image.
  • Replace selected images with different images that you can pick from your hard-drive.
  • Select all images in the currently selected row (can be helpful if you need to replace or remove all images in the row)
  • Remove selected images from the current row (images will remain in your project's images folder just in case you will need them later)
  • Move selected images up and down to reorder.

Note that there are also two extra controls next to the row drop-down which allow to add a single extra row or remove selected one accordingly.

Horizontal drag sensitivity in multi-row mode

It's called X-axis sensitivity for clarity as the vertical sensitivity control is also available (which is showing as Y-axis sensitivity in the latest release as per the image below). In short, it's a horizontal drag sensitivity and this means that if a mouse or touch moves a shorter distance (in pixel) than the X-axis sensitivity value, the images will not move horizontally. This can be useful for improving the stability of the vertical image drag such that the jumps between the image rows occur without accidental shifting of images horizontally. Row sensitivity works in the same way so you can now play with both values to achieve desired smoothness of your 3D product rotation depending on the number of rows and images in your project.

And as a reminder, the Drag speed factor setting that we had there before controls the number of times in a given second to check for the mouse or touch position (it's multiplied by Rotate period located on the same tab to give the value in milliseconds). So if we check for mouse or touch position every let's say 50 milliseconds (based on the configured values of Drag speed factor & Rotate period) and the X-axis sensitivity or Y-axis sensitivity threshold is reached as per above, we move the images accordingly.

Note that when there's just a single row of images, both X-axis sensitivity and Y-axis sensitivity are disabled as the Drag factor & Rotation period are enough to control the drag speed of a single row.

Separate JPG quality control for High-res images (PRO)

There's an extra JPG image quality control for your zoom and full-screen images on the Publish form. This applies when you configure your 3D product views to contain two sets of images (i.e., small fitted images and high resolutions ones for zoom and full-screen) which is enabled via a check-box on the Publish form called "Created an extra set of fitted images".

Having a separate control of the JPG quality for your high resolution images can dramatically speed up full-screen and zoom loading times as often you don't really need supper high quality high-res images (e.g., compression artifacts are not that visible on large images). The high-res image rendering performance inside a browser window will also improve accordingly.

Skip image processing
on publish & preview

As you can see in the image above, there's also a new setting on the Publish form called "Skip images and just process updated settings and hotspots". Now you can just check this box before hitting Publish or press F6 on your keyboard to just launch a browser preview after changing viewer settings that do not affect images (e.g., drag sensitivity, template update, hot-spot edits, etc).

In other words, it will not process and copy images again on publish when it's checked on the Publish form or when you hit F6 while making the edits. This saves a lot of time! Note that you would still need to do an initial full publish after creating a new project or at any time after you change viewer dimensions, high-res dimensions, image crop, image filters, path tools or watermarks, all of which affect image output.

Automatic software updates

Finally you can simply check for new product releases by going to the About form and selecting the new Check Updates button. It's also possible to configure the feature to check updates on every application launch via the check-box as shown below. So from now on, whether you have purchased a license or use the free version, you can get the latest an greatest without annoying email requests we required before.


New scalable loading progress indicator

Now is a good time for our old progress indicator to go. Being an animated GIF, it's not very mobile friendly which becomes more and more noticeable on the modern mobile devices with retina screens. Another complaint we've heard was that it looked too small in full-screen mode on large monitors. So we devised a cool new modern one that looks quite nice on tablets and phones. It can be styled in CSS with different colors, etc and is scaled automatically when in full-screen.

Image delays in animated GIF publishing

Our first v3.6 beta released featured new Images Delays that can be assigned under Images->Rows for each image to help creating interesting effects during product rotation without unnecessary image duplication. The same image delays will now propagate to animated GIF publishing as well, allowing for more creative animations with pauses on important frames, acceleration effects and similar.

iFrame management in HTML hotspots

With this relatively small update it's now possible to embed video and audio content via iFrame inside the hotspot rollovers when using HTML markup. Now we track iFrame elements inside the rollovers and remove them automatically when a rollover becomes hidden. Once user hovers over or clicks again on a hotspot indicator we re-add iFrames to their original position. Without this change, a playing video or audio embed (e.g., Youtube or SoundCloud) would still be playing when rollover becomes hidden which made this option not very useful in the previous releases.

New API setting for full-screen views

You can see a quick snippet below to give you a better idea of the new setting called configFileFullScreenURL. Use this setting to configure alternative view / xml config for the full-screen function, i.e., it will be loaded when user selects the full-screen button, if configured. This can be useful, if you need to show different hotspots, for example, or different images all together when viewer opens up in full-screen. When publishing separate product views to use in conjunction with this setting, please do not select “Create extra set of fitted images…” on the Publish form as fitted images are not needed in this case and this may break hotspot positioning.

    configFileURL: "your-viewer-config-xml-path.xml",
     configFileFullScreenURL: "your-full-screen-viewer-config-xml-path.xml"



[UPDATED on June 10, 2015. More new features and fixes]:


PRO & Enterprise customers can either get the free download to play with the new beta features (you can still activate it with your spoteditor.code except for some of the image editing features) or request the commercial version of v3.6 Beta via support email (support at webrotate360 dot com), if you haven't received v3.6 beta download URL from us before which still works! From now on, you can just check and download new software updates as described in this blog post.

And if you need any help applying this update to any of WebRotate 360's plugins (i.e, WordPress, Joomla, PrestaShop, Magento, OpenCart, BigCommerce), please let us know and we would be happy to assist (it's just an FTP upload of a single published folder, i.e imagerotator).


Bookmark and Share

3D Product View in Firefox Via Transparent PNGs

by NewsMaster March 09, 2015 14:32

Here is one of those cases where you can't say quickly if a 360 product view is a 3D CAD rendering or photography. This cool heart rate monitor by PulseOn (I'm really considering getting one!) looks almost like it was photographed but it's just a little bit too perfect for a shiny object like this..

Just click on the image and scroll down to the middle of the page where you will see the interactive 3D product view.

3D product view of PulseOn wearable

One important note: if you are using Firefox, you will see (at the time of writing) some odd image duplication as you spin 360-degree product images. This is because the images used in this product view are transparent PNGs (we're not sure why as PNG files usually are quite larger than JPG and the background here is a solid color so JPG images would work much better).

So when viewed in Firefox (or Opera), we have a configurable optimization for large image rendering designed specifically for Firefox that will result in this image duplication if the images are transparent. This optimization is on by default in our CMS and eCommerce plugins.

We also have a setting in most of our plugins to turn off this optimization as needed. In our WordPress integration, for example, this setting is located under the WebRotate 360 plugin settings as highlighted on this image:


3D product viewer settings in WordPress

Also, when you publish in SpotEditor, this setting is added into the published html template automatically to turn off the Firefox optimization if transparent PNGs are used (zIndexLayersOn = false).

PS: in most cases we do not recommend using PNGs, especially with transparency as the images are usually just too big and result in much slower loading and rendering inside a browser.


Bookmark and Share

First v3.6 Beta Release. Now With Full 3D Product Views

by NewsMaster February 18, 2015 16:48

Happy to announce our first release of WebRotate 360 Product Viewer v3.6 Beta (build and the most exciting part of it, our brand-new Multi-Row support!

Here's a simple demo of our sample 3D object spin, consisting of seven rows of 3D CAD rendered images, 36 images each, and published via Mobile full page template. Just click on the image to see it in action.

Sample 3D product spin with one hotspot via retina skin

The lack of this feature has been a long-standing issue with out product. We promised it on many occasions or offered fancy workarounds (which do work too!). With v3.6 you can finally import your multi-row 3D product photography or 3D CAD images "for real", and create full 3D product views with all our standard features including hotspots, zoom, full-screen, APIs, watermarks, image filters, etc.  More on this in a second..


Today we're also releasing two new cool enhancements.

First is our new Image Delay option which allows you to pick any image(s) in your product view and assign an arbitrary count of "skip frames", forcing it to slow down on selected image as user drags it on the screen or during image playback.

In our own 360 product photography projects this has been often a requirement where a customer wanted to slowdown on a certain sequence of images and the only way to achieve this was by duplicating a bunch of images. And this was quite ugly... both in terms of managing the duplicate images, counting and naming them and then of course the issues with the loading performance. Now it's just a click away and no image duplication!

Another important addition is the new In-Browser "full-screen" mode which allows you to configure your product views to not expand beyond the boundaries of the current browser window when the full-screen option is activated. Full-monitor screen feature we had before is still cool but we feel that sometimes it can be too intrusive and performance wise may not be best suited for some mobile devices.


So lets review each of these additions:


1) To start with webrotate 3D product views, create a new project in SpotEditor and specify the number of image rows that you are importing in the field highlighted in yellow:

Import multi-row photography or 3D CAD renderings


2) Once images are imported, you will see these two new controls:

a) Current row selection under Images->Rows. This settings is only applicable while inside SpotEditor and simply allows navigating between imported rows as you apply settings, hotspots, etc.

Note that switching between 3D rows using this setting is not instant as we have to release the current row of images from SpotEditor memory first and then load a new row from scratch. Later we can add some extra checking for available computer RAM and load as many rows into SpotEditor memory as possible during import. For now, since these images are loaded in computer RAM uncompressed (to allow for instant edits and previews), we have to unload & reload rows as you navigate between them via the current row drop-down  to make sure this works for most of our users regardless of available RAM.

Switch between rows of 3D product images


b) Row Sensitivity under Control->General. This settings control how easy it's to jump between rows in your published 3D product views as user drags the images vertically. Adjust this setting depending on the number of rows you imported. Default is 15.

If you drag it all the way to 0, the vertical drag will not work which may be useful for such applications where you just need to instantly change colors or similar variable product presentation in your 360 product views without reloading sets of images from a server as now you have all these rows already loaded and can navigate them using image labels, API, or even custom up / down arrow buttons as needed (will expand on this possibility in our future posts).

Adjust sensitivity of vertical rotation in your 3D product spins

3) This beta has one only skin (retina) updated with Up and Down arrows for the toolbar.


4) Updated API adds these functions to support 3D product views that you can play with using our JavaScript API template (playToLabel with 3D views looks awesome!):

api.images.showImageByDelta(imageIndex, rowIndex) // new rowIndex (optional) paramter
api.images.showImageByIndex(imageIndex, rowIndex) // new rowIndex (optional) paramter


Navigate to Image->Rows and double click on any image to assign the skip count. Skip count is the number of frames that the viewer will skip while showing this image as user drags an object as well as during playback and arrow navigation (i.e left, right, up, down controls). Hotspot "play to label" action and related APIs will also respect this setting.

Slow down your 360 product views on selected image(s)


Simply check this checkbox to activate the new feature.

Limit full-screen function to browser window



There're also several minor fixes and one important improvement for image rendering performance in this release, all of which will be summarized in the final notes for v3.6 release that should be out in about 2 months. If you would like to give it a try now, please use the following link to navigate to our free Beta downloads. As always we look forward to any feedback!


[UPDATED on June 10, 2015. More new features and fixes]:


PRO & Enterprise customers can either get the free download to play with the new beta features (you can still activate it with your spoteditor.code except for some of the image editing features) or request the commercial version of v3.6 Beta via support email (support at webrotate360 dot com).

And if you need any help applying this update to any of WebRotate 360's plugins (i.e, WordPress, Joomla, PrestaShop, Magento, OpenCart, BigCommerce), please let us know and we would be happy to assist (it's just an FTP upload of a single published folder, i.e imagerotator).


Bookmark and Share

Powered by BlogEngine.NET
Theme by Mads Kristensen | Modified by Mooglegiant

About this Blog

WebRotate 360 are specialists in interactive e-commerce solutions, web and software development for Internet retailers, product manufacturers, and marketing agencies.

We're a team of great individuals who bring our commitment, passion and skills to help you showcase your products online.

Follow on Twitter  Follow on Facebook  Join us on Google plus  Follow on YouTube  Subscribe to this blog  

Back to »

360 Photography Articles

Browse our 360 product photography articles and tutorials

Find us on Facebook

Newsletter, November 2016

WebRotate 360 spin newsletter

Newsletter Signup

Subscribe to our regular newsletter updates and keep current with WebRotate 360 news, including our latest tips and tricks, new equipment guides, promotions, coupons, product releases and more.

Featured Product

Browse 360 photography equipment on photogear360

DIY 360 Photography Turntable

Our Latest Video

360 Product Viewer PRO

Download our 360 product photography software

Follow on Twitter