Blog | WebRotate 360 | Page 5

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 Photogear360.com/blog 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 MyWebsite.com. Now imagine you have another server (or CDN) by the name of ImageServer.com 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 ImageServer.com, i.e 360 viewer config xml, scripts, css and the license all have to be hosted on MyWebsite.com.

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

MyWebsite.com

    - yourviewerfolder
           + imagerotator
              license.lic  
              config.xml

ImageServer.com

    - 360_assets

            - product1
                   - images
                         image01.jpg
                         image02.jpg
                         ...
                         image20.jpg

            - product2
                   - images
                         image01.jpg
                         image02.jpg
                         ...
                         image20.jpg


Now let's imagine that there're two webpages named product1.html and product2.html located somewhere on MyWebsite.com 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>


product1.html:

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

_imageRotator.settings.configFileURL  = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath  = "/
yourviewerfolder/imagerotator/html/img/basic";
_imageRotator.settings.rootPath       = "http:/ImageServer.com/360_assets/product1/";

...

_imageRotator.runImageRotator("wr360PlayerId");


</script>


product2.html:

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

_imageRotator.settings.configFileURL  = "/yourviewerfolder/config.xml";
_imageRotator.settings.graphicsPath  = "/
yourviewerfolder/imagerotator/html/img/basic";
_imageRotator.settings.rootPath       = "http:/ImageServer.com/360_assets/product2/";

...

_imageRotator.runImageRotator("wr360PlayerId");


</script>


As you can see, we're referencing all scripts and xml from the same MyWebsite.com location where these pages are hosted (the preceding forward slash ie /yourviewerfolder just makes the path relative to the root of MyWebsite.com). Also in this setup we decided to reference a single (master) config.xml that we keep under yourviewerfolder folder on MyWebsite.com 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 ImageServer.com 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:/ImageServer.com/360_assets/product1/) and what it simply does, if rootPath is available, is appending the relative image path from xml to the rootPath as configured, ie:

        http:/ImageServer.com/360_assets/product1/images/image01.jpg


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 ImageServer.com. 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 ImageServer.com) 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 PhotoGear360.com 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="http://yourhostingsite.com/viewloader.html?sku=sampleshoe&wd=500&ht=500" 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
....................................................................... */

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

.ProductAside .ProductThumbWrap{
    display: none;
}

div#fancy_outer{
    z-index: 50099 !important;
}

div#fancy_overlay{
    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">
//<![CDATA[
jQuery(document).ready(
function(){
    WR360Initialize();
});  
//]]>
</script>

 

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 - http://bigcommerce.360-product-views.com/sodling-black-leather-duffle-bag/).


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:

http://www.opencart.com/index.php?route=extension%2Fextension%2Finfo&extension_id=11377

 

Bookmark and Share

WebRotate 360 Product Viewer 3.5 Update

by WebRotate 360 June 11, 2013 12:14

Hi folks, here is another v3.5 viewer update from WebRotate 360. We also included a download link below to our latest stable limited beta script (build 123). As usual, just copy the imagerotator folder that you will find in the zip download below over the one you have in your 360 viewer integration.

To apply this update to your existing SpotEditor installation just copy the contents of the
SpotEditorUpdate folder that you can also find in the zip over the same files in your SpotEditor installation folder located under Program Files (x86)\WebRotate 360\SpotEditor on Windows. If you are on Mac, right click on the SpotEditor icon, then Show Package Contents and navigate to Contents->Resources and then copy the files from SpotEditorUpdate over the same files under Resources.


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


Updated list of features and fixes coming in 3.5:

  • Full-screen option in JavaScript mode. As you probably know, we're discontinuing Flash support going forward with the 3.5 release and the only feature we were lacking in pure JS mode was the full-screen capability. Well, this became possible thanks to the recent enhancements in Firefox, Chrome, Safari and also to some extent in IE and Opera (the last two ones will show a full-browser view vs full-screen that we usually expect from Adobe Flash). This demo below uses a separate high-res image set in the full-screen mode (the same images that are used for the deep zoom), but you can also use your main set of images for the full-screen. This will remove the initial loading while in the full-screen mode and you can even pass a different xml configuration as a viewer parameter so that your full-screen can use completely different images and viewer settings.
  • Support for responsive websites - now you configure your 360 views to stretch horizontally and vertically with the layout of your responsive websites that scale with the browser window or a mobile screen.
  • Simple APIs that allow controlling most of the viewer functionality from your own script, allowing you to have your own control interfaces, override hot-spots, and more.
  • Multiple 360 views on the same page. Many of you have asked about it and now it's done!
  • Out-of-the-box v3.5 integration in Magento, BigCommerce, OpenCart, PrestaShop, WordPress.
  • Revised SpotEditor.
  • jQuery plugin support. It's now possible to use the 360 viewer as a generic jQuery plugin.
  • jQuery 2.x support. jQuery team has released a slimmed down version that drops support for obsolete browsers and some of the functionality that we relied on in the previous releases. v3.5 has been updated to work nicely with the most recent jQuery releases.
  • Inertia or gradual slowdown during drag release. There's also a couple of settings in SpotEditor that will allow you to adjust how fast and responsive the inertia should be.
  • New hot-spot type to effortlessly create video hot-spots based on youtube videos.
  • New hot-spot mode to allow configure the popups to always appear in a predefined (configured) position regardless of where the hot-spot indicator (those small circles) is positioned on a rotating product, helping you create a greater variety of professional looking 360 product spins.
  • New hot-spot behavior that you can use to force the hot-spot activation on mouse click instead of hover / touch mode we had relied on before.
  • New rotation mode that works on mouse hover vs mouse dragging with the left button pressed.
  • Two more standard 360 viewer skins and one mobile skin with less controls and larger graphics.
  • This release addresses the issue with Firefox white image flashing during rotation which was caused by this Firefox bug and was most prominent in the latest FF 17 releases. Similar issue in the latest Opera has been also addressed.
  • The hot-spot issue on Android stock browser and Android Chrome where hot-spots wouldn't stay up under certain conditions is also fixed.
  • Would like to see something else in 3.5, please let us know!

 

Please note that not all of these features will be available in the free version of WebRotate 360 Product Viewer going forward. We're also adding a slimmed down paid edition of our 360 photography software that will have some of the features but will not include more advanced options such as API's, multiple on-page 360 product spins, advance hot-spot modes, etc that will be only available in PRO+ and Enteprise. Pricing for PRO+ and Enterprise will be revised as well. Though all clients who have purchased PRO or Enterprise before the official v3.5 release will get the full-featured upgrade, so hurry up and get PRO today - we will be definitely releasing v3.5 shortly.

 

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

New SpotEditor 3.5 Video »

 

Bookmark and Share

How To Add Facebook Likes To Your 360 Product View

by WebRotate 360 June 06, 2013 11:34

Did you know it's possible to add Facebook Likes to your 360 product view using our 360 photography software? In this quick tutorial we'll show you how it can be done in a few simple steps. You would use a similar approach for other social plugins or similar static and interactive elements:

1. Go to https://developers.facebook.com/docs/reference/plugins/like/ and generate your Like code. Uncheck Send button as you will need to use the iFrame integration not the XFBML for this test.

 

2. Copy the script code on the iFrame tab as shown below. Note the // in front of www.facebook... and replace the two forward slashes with http://

 

3. Go to SpotEditor and create a new Fixed hot-spot.

 

4. On the Text Content tab, check As HTML markup and type in a container for your Like button like this (change height and width as needed as it's just a sample container and can be anything):

<div style="display:block;height:100px;width:100px;"></div>.

 

5. Insert your iFrame script inside the div between > and <div>

 

6. Click Preview in browser to see if it looks as intended.

 

7. Position the hot-spot as you like via X Y coordinates or the grid with margins on the Hotspot tab (see above).

Here's what we got in our quick local test:

 

Add facebook likes to your 360 product spins


Bookmark and Share

Powered by BlogEngine.NET 2.0.0.36
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 WebRotate360.com »

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