Blog | WebRotate 360 | Page 5

How We Started With 360 Product Photography

by WebRotate 360 February 25, 2014 16:14

DIY 360 product photography studio

If you haven't seen our recent short post on PhotoGear 360 about how it all started when we bought our first 360 degree product photography turntable and a lighting kit, click here.

That's about the time when it became clear that there was a lack of a solid out-of-the-box 360 photography software that we could simply package with the 360 photography we kept producing for our clients. Most were mediocre and heavy Flash viewers that required a lot of efforts to configure and integrate and their support was often an issue.

That's how a combination of WebRotate 360 Product Viewer and our desktop authoring tool SpotEditor was born.

And this is what distinguishes WebRotate 360 software developed by us in house in Pasadena, CA - we spent endless hours shooting commercial 360 product images for several years and probably the same amount of time helping our clients integrate the results of our work to understand what it takes to achieve professional results.

Bookmark and Share

Patch for Firefox 27 Rotation Locking Issue in WebRotate 360 Product Viewer 3.5 Beta

by WebRotate 360 February 05, 2014 11:09

We didn't plan to write a new post until we could offer you to download our new SpotEditor 3.5 but things have changed yesterday when we found out that the latest Firefox release (version 27) that came out yesterday, Feb 4th, 2014 broke 360 image rotation in all of our products that run the 3.5 beta script. With this Firefox update, the image rotation would lock up after you drag 360 images just for a few moments.

The 3.5 beta script is packaged with all our recent plugins including Magento, OpenCart, BigCommerce, WordPress as well as our Sharing script. If you are using our Prestashop add-in it's unlikely that you have 3.5 beta as we didn't have a chance to update it to 3.5 beta (though we did help some of you to install 3.5 beta script in Prestashop).

The place where Firefox 27 broke 360 image rotation was identified and it had to do with our special Firefox targeted functionality that eliminates image flicker during rotation when using larger images. It's a tricky piece of code that relies heavily on image events and it seems that Firefox 27 introduced a regression in that department.

We spent some time yesterday and cooked up a good solution that still keeps our flicker prevention module working as designed while addressing the issue with Firefox 27. All our downloads, plugins, etc that utilize 3.5 beta have been successfully updated yesterday and today and were re-tested everywhere.

If you have previously installed either of these, please download our 3.5 patch below and replace imagerotator.js included in the zip in your webserver installation under the imagerotator folder wherever it happens to be on your server (if you're not sure where it is, please let us know):

  • 3.5 beta limited update
  • Magento integration 3.5.x
  • WordPress integration 2.0
  • Any WebRotate 360 OpenCart integration
  • Any WebRotate 360 BigCommerce integration


Or to make it simple, if you see inertia effect when dragging / releasing 360 images where rotation gradually slows down on release, or if you have a working full-screen feature, it's 3.5 beta. For the techy types, you can fire up your browser console (e.g firebug, etc) and see the 360 viewer version on page re-load inside the console.

Download patch »

If you are using our PRO script with Full-screen support, please contact us directly to get updated PRO-enabled 3.5 script.


Bookmark and Share

Complete 360 Degree Image Editing Workflow With WebRotate 360 SpotEditor v3.5

by WebRotate 360 January 19, 2014 11:46

Check out this new preview video of our latest version of WebRotate 360 SpotEditor v3.5. In this video we show just part of the new functionality related to our unique 360-degree image editing workflow designed specifically with the 360 product photography in mind. It includes our exclusive smart crop and resize tools, one of a kind background helper removal tool, immediate batch image preview and editing, quick path tools and more.

Using these fine-tuned tools, neatly assembled in one lightweight package will allow you processing your raw JPG images to create finalized 360 product views with a pure white background, including watermarks, interactive hot-spots published straight to your FTP in just a few mouse clicks:

It's not yet released, but please don't hesitate to request a beta (some of the features shown in the video are only available with our PRO license so please send us a confirmation of your PRO license purchase so that we could send you a full beta as shown in the video) or just subscribe to our newsletter that you can find in the right column of this blog to be first to know when this release is finally out!


[March 07, 2014 - You can now download this Beta release for Windows and Mac OS X on our main download page under DOWNLOAD LATEST BETA 3.5]

Other features being finalized for this release:

  • New hot-spot indicator library tool to allow adding your custom hot-spot image indicators with ease.
  • Hot-spots that activate on click vs hover.
  • 360 degree spin and pan with mouse hover.
  • Image labels to allow jumping / playing to referenced labels.
  • New hot-spot actions with the ability to control 360 viewer functions such as zoom or playback as well as navigating to linked 360 views.
  • Extensive API
  • A set of pre-made publishing templates such as responsive design template, mobile template, API template, popup / lightbox template, gallery template.
  • And a lot more.

Bookmark and Share

How We Photographed 360 Views of Scubapro Fins

by WebRotate 360 January 14, 2014 12:17

There's a new blog post on our Photogear 360 blog with some interesting bits on how we accomplished a 360 product photography project for SCUBAPRO a couple of years ago which involved a few diving fins in a suspended 360 degree motion. Check it out by following this link or just click on the image below.

We will keep sharing more details on how we approach 360 product photography in own commercial photography projects on the Photogear 360 blog while this blog will be used mostly for more technical details pertaining to our WebRotate 360 Product Viewer software and related topics.

360 degree product photography via suspension

Please let us know if you would be interested in making a guest blog post here or about your experience with 360 degree product photography. Just use one of the emails on this page to get in touch.

Bookmark and Share

How WebRotate Support for CDN and Master Config Actually Works

by WebRotate 360 December 10, 2013 13:02

In this post we will quickly go through a specific WebRotate 360 Product Viewer PRO feature that seem to bring most questions or is just plainly not used as it's considered to be too complicated or not documented well enough.

In short, the CDN support which we had in the core 360 product viewer for a long time allows you to store your 360 product images on an external server or a commercial Content Delivery Network such as Amazon S3 / CloudFront or Rackspace Cloud Files (there are many more!). There are several reasons why you would want to host stuff on CDN, but for your average ecommerce application this is done to speed up website loading through various file downloads as CDN providers usually have their content servers distributed geographically. Or in simple terms, these servers are often much closer to your web visitors and often have higher bandwidth than the one where your actual website is hosted. Another possible reason for using CDN / external image hosting is for 360 product photographers to keep all their photography work on their own server(s) such that they can manage the images for their clients as needed.

So let's start with a quick example.. Let's say you have your own website where you are planing to show a lot of 360 product spins and let's call it Now imagine you have another server (or CDN) by the name of where 360 images will be hosted for one reason or another. A simple rule with this setup / feature is that only the actual 360 images are stored on, i.e 360 viewer config xml, scripts, css and the license all have to be hosted on

So here's how this might look in terms of file location:

    - yourviewerfolder
           + imagerotator

    - 360_assets

            - product1
                   - images

            - product2
                   - images

Now let's imagine that there're two webpages named product1.html and product2.html located somewhere on with an integrated webrotate 360 viewer. Here's what you would need to note when looking into the source of both files:

These script includes are the same for both product1.html and product2.html:

<link href="/yourviewerfolder/imagerotator/html/css/basic.css" .../> 
<script src="/
yourviewerfolder/imagerotator/html/js/jquery-1.8.3.min.js" ...></script>
<script src="/
yourviewerfolder/imagerotator/html/js/imagerotator.js" ...></script>


<script language="javascript" type="text/javascript"> 

_imageRotator.settings.configFileURL  = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath  = "/
_imageRotator.settings.rootPath       = "http:/";





<script language="javascript" type="text/javascript"> 

_imageRotator.settings.configFileURL  = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath  = "/
_imageRotator.settings.rootPath       = "http:/";




As you can see, we're referencing all scripts and xml from the same location where these pages are hosted (the preceding forward slash ie /yourviewerfolder just makes the path relative to the root of Also in this setup we decided to reference a single (master) config.xml that we keep under yourviewerfolder folder on as well. This allows us to save all that time and efforts creating a bunch of webrotate xml configurations for all our products as we're using here just a single configuration xml and it's the same one that will be loaded for all our products!

Note that we don't have to do that but it surely helps with ecommerce setups with hundreds or thousands of 360 product views. With the master config you can now manage 360 viewer settings for all your products from one place. The only limitation is that since you are using one xml for all your 360 product views, the number of images under each product folder on and their file names would have to be exactly the same. Lets see why this is a requirement.

Here's how your images are usually specified in your viewer config xml (SpotEditor tool will always use the relative path for all images inside the xml):

        <image src="images/image01.jpg" />
        <image src="images/image02.jpg" />
        <image src="images/image20.jpg" />

When we load this xml, the 360 viewer first checks for the rootPath parameter (which in our sample with product1.html is http:/ and what it simply does, if rootPath is available, is appending the relative image path from xml to the rootPath as configured, ie:


And so everything works for all products as long as the image names and their count in that master (single) config xml match your uploaded image folders on Note that you can still use rootPath even if you're not using CDN or an external server - just point it (rootPath) to the 360 image folders on your main website ftp to utilize the same benefits of the single master config xml file.

This might sound a bit complicated so some of our ecommerce plugins have this setup pre-configured and all you need to do is to upload your images on your CDN (e.g and reference your single Master Config in the module settings as well as the rootPath field for each product as per your 360 image folder setup. This is currently supported out-of-the-box in Magento, OpenCart, PrestaShop and WordPress modules. The first three have a dedicated field for both Master Config and Root Path (please refer to corresponding module or add-on notes to see where these fields are configured) while our WordPress plugin has an extra short-code parameter called rootpath which you can point to your CDN / external server as per above.

PS: of course, the other option is to host your complete 360 views on an external server / CDN by just uploading SpotEditor output as-is and allow your clients embedding your product html pages (that have nothing else but 360 views) via iFrame. This has its own limitations and benefits (the full-screen function wouldn't work, for example). You can read more about our script that helps with the iFrame sharing in this post.


Bookmark and Share

How to Shoot Scooters in 360 Degrees by See 360 Degrees

by WebRotate 360 October 16, 2013 13:53

Check out our latest guest blog post on by Bary Daly, an Australian product photographer in Melbourne and our friend. In this post Bary talks about 360 spin photography of a small scooter that he produced for one of his clients. It's pretty informative with a photo of his studio setup and can be used as a simple guide for shooting larger items in 360.

Sample post-processed 360 degree product view

Bary’s set up and his manual DIY 360 photography turntable (which is similar to ours) are good examples of how 360 product photography can be done professionally and on a budget. Read the full post here or visit his 360 photography studio on the web.

Bookmark and Share

How Group Delphi Uses WebRotate 360 For Their Interactive 3D Animations

by WebRotate 360 October 01, 2013 12:25

Here's an interesting use of WebRotate 360 Product Viewer that was kindly shared with us by Group Delphi.

And here's what they had to say:
"Group Delphi worked with WebRotate 360 to create a touchscreen demo at an industry tradeshow showcasing several industrial motors. 3D CAD models were animated to show the exploded views with pop up details as well as rotations of individual parts. After the show it was so well liked the client wanted it packaged as a self running PC app for sales to use on laptops. Finally it was also made into an internal iPad app for sales to take on the road."


PS: Some of the functionality used by Group Delphi in this project was made possible by recent additions and fixes in the latest release of our 360 photography software that you can download here.

Bookmark and Share

Host 360 Product Views for Your Clients or Yourself

by WebRotate 360 September 03, 2013 16:03

Here’s a cool new utility for all of our users. Imagine you can have your own hosting service for your 360 product photography and let your clients use your 360 product views by simply pasting a simple YouTube style sharing code onto their pages. Now this becomes possible thanks to a simple sharing script from WebRotate 360 that you can upload online in addition to the actual 360 views like you would usually do with our 360 photography software.

Checkout this great sample by VIVA Sanitary in UK who use this tool to let resellers show off their innovative bathroom products in a gorgeous 360 degree rotation. Note the small download arrow under the 360 view on the right. If you click on it, there’s the sharing code that can be used on any website to load exactly the same 360 degree spin from VIVA’s website in the same way you would embed a YouTube video on your own webpage.

Here’s the scoop:

  • Download this new WebRotate 360 Sharing script (as of Dec 22, 2014 it uses our latest release of WebRotate 360 Product Viewer v3.5).
  • Unzip and upload everything somewhere on your hosting server (via FTP for example).
  • Note the location of the file called clientpage.html in the upload and load it in your web browser (i.e. from your web server where it was just uploaded).
  • You will see the usual WebRotate 360 sample shoe – this is pretty much it!

What you are looking at is a test page with nothing else but the sharing (embed) code. It looks like this:

<iframe src="viewloader.html?sku=sampleshoe&wd=500&ht=500" width="500" height="500" frameBorder="0" scrolling="no"></iframe>

Right now this page is still located on your hosting web server / FTP (it’s just a sample) - to actually give this code to your clients to use on their own web pages, all you need to do is change viewloader.html to include the full URL to this file on your hosting server so it would look something like this:

<iframe src="" width="500" height="500" frameBorder="0" scrolling="no"></iframe>

Then just replace sampleshoe with the name of a folder that you will upload under sharedviews for each of your 360 degree product view –  what you upload there under sharedviews is exactly the same single folder that is created on publish via SpotEditor under 360_assets (check this video for more details about publishing and output folder structure).

You can change width and height to the dimensions of the 360 viewing box that your client will prefer to see on their page or even let them play with these dimensions on their own - the 360 product view will re-scale automatically! Most webmasters will immediately understand what’s going on and appreciate the simplicity of this simple embed code.

Done. Now you can be your own 360 product photo hosting service for your clients.

PS: there’re still some manual steps involved but it’s a good start for being in command of your 360 product images. You can simply organize your folders per client / project on your FTP or via a cloud service of your choice (Google Storage, Amazon S3 / CloudFront, Rackspace, or even Google Drive or Dropbox, and there're many others). We are also considering to release a standalone management console that will allow you to manage your shared 360 degree photos in a more automated fashion. Also updated SpotEditor 3.5 with uploading capabilities compatible with one or more of the favorite cloud hosting providers and most FTPs is on its way..

And here's some more related resources if your good ol' shared or dedicated web hosting / FTP is not enough (note that Amazon S3 + CloudFront is probably the best choice right now if you want to offer professional e-commerce hosting service for large or small clients around the world, while services like Dropbox or Google Drive can be used very easily for simple sharing of your own 360 degree spins, presentations without any extra 3rd party web hosting service):


Bookmark and Share

BigCommerce 360 View Integration Beta 1.0 Released

by WebRotate 360 July 10, 2013 12:22

BigCommerce users, rejoice! WebRotate 360 Product Viewer for BigCommerce Beta (DEMO) is now available for download. Best of all, it's free and all your 360 product images (and the rest of the integration files) can be hosted via your own BigCommerce file storage that comes with your BigCommerce plan. Please find the installation instructions and our beta download package below:

1. Upload

Download this beta package, unzip, and then upload webrotate360 folder via your BigCommerce FTP under the content folder that you will find in the root of your FTP (you can get your BigCommerce FTP details under Settings->File Access->FTP in the BigCommerce Admin).

2. Edit styles

Sign into your BigCommerce Admin and navigate to Design->Template Files. Expand Styles section and open styles.css in the Edit mode and paste the following to the bottom of the css file and save (you can use your own styles for #wr360WrapperId, change viewer width and height, add borders, etc):

/* WebRotate 360 Config
....................................................................... */

    width: 400px;
    height: 300px;
    margin: 10px 0 30px 0;
    border: 1px solid #F4F4F4;

.ProductAside .ProductThumbWrap{
    display: none;

    z-index: 50099 !important;

    z-index: 50098 !important;


3. Edit Product Details template

Go back to Design->Template Files, expand Panels and open ProductDetails.html in the Edit mode. Paste the following to the bottom of the file and save:

<!-- WebRotate 360 Initializer ----->
<link type="text/css" href="/content/webrotate360/imagerotator/html/css/basic.css" rel="stylesheet"/>
<script type="text/javascript" src="/content/webrotate360/imagerotator/html/js/imagerotator.js"></script>
<script type="text/javascript" src="/content/webrotate360/wr360hook.js"></script>
<script type="text/javascript">


4. Configure test product

Open a test product for edit in BigCommerce Admin (Products->View Products) and navigate to the Custom Fields tab. Create a new custom field and call it config_file_url. Add the following as a test value: /content/webrotate360/360_assets/sampleshoe/config.xml

Navigate to the product page in your webstore and you should see a 360 product spin of a sample shoe in place of the main product image (similar to this one -

5. Add your own 360 spins

If you haven't created 360 views with WebRotate 360 Product Viewer before, you will need to download our free 360 photography software and follow this simple YouTube video guide to create your 360 degree product view first.

Upload published 360 spins (only those folders that were created by the software under the 360_assets folder) via BigCommerce FTP under contents/webrotate360/360_assets and note the location of the xml configuration file(s) located in the uploaded folder(s). Then just create a custom product field for each product with a 360 view as per above instructions and paste relative xml path into the custom field value and save the changes.


Here's how your FTP folder structure may look like:

<BigCommerce root FTP>
  --> content
      --> webrotate360
           --> 360_assets
               --> <product1 folder>
               |    |
               |    --> <product1 images folder>
               |    --> <product1 config file>.xml
               --> <product2 folder>
               |    |
               |    --> <product2 images folder>
               |    --> <product2 config file>.xml

Download BigCommerce Integration and please let us know if any issues!


Bookmark and Share

OpenCart vQmod Support Is Now Available

by WebRotate 360 July 10, 2013 11:10

For those folks who are using our 360 product viewer for ‪‎OpenCart‬, as promised we have now included vQmod support into the viewer installation package. No more manual mangling with the core OpenCart files!

Readme instructions as well as the documentation notes on our OpenCart extension page (linked below) have been updated as well to reflect the new option.

Read more and download here:


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