Blog | WebRotate 360 | Page 6

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

New Magento Integration For WebRotate 360 Product Viewer Released

by WebRotate 360 May 16, 2013 14:31

Today we're announcing a long awaited release of our updated Magento Integration v3.5 on Magento Connect.

There are several major enhancements in this release:

  • Integration has been updated to the latest stable 360 viewer script that packs a slew of improvements and latest fixes (more is coming in the next script update shortly).
  • prettyPhoto lightbox support has also been updated to one of the latest releases (you can now also choose one of several nice skins that it comes with).
  • We introduced a new Ad-hoc integration mode (in addition to the standard one). It allows you to keep any other customizations or third-party modules that you might previously had installed on your product pages in the same location where we activate our standard integration. Previously this was a major concern as there have been many conflicts with the existing 3d party modules that could be only resolved by uninstalling one of the components. Now with the addition of the new Ad-hoc integration you can hook the 360 degree photos pretty much anywhere on your product pages. It can be used as an embedded 360 view or as a small image thumbnail (or a text link) that will activate the viewer inside the same prettyPhoto lightbox popup.
  • We also added our Root Path / Master config support that allows you to have a single 360 viewer configuration file for all of your products in Magento (assuming they have the same number of 360 images, etc) and also support for loading your 360 degree product photos from an external server or CDN.
  • Other minor extras and fixes.


Here's some of the screenshots from this release (click to expand). Let us know if any questions!

Magento sample 360 product view integration

 

PS: this new module has already been successfully installed by a few folks and they reported that everything went smoothly via Magento CE 1.6 and 1.7.

 

Bookmark and Share

Shooting Flashlights in 360 degrees

by WebRotate 360 May 09, 2013 10:46

Check out our latest blog post on PhotoGear 360 where we talk about 360 spin photography of flashlights using the Ortery equipment combo, consisting of the PhotoCapture 360 photography turntable and PhotoSimile 50 Lighbox.

We shared a pretty interesting write up there that you can find helpful when photographing small uniform products similar to flashlights using the Ortery hardware. Here's a short extract from this post:

"What we also had to figure out was how to best present the flashlights as just dropping them on the 360 turntable was not expected to produce good results – we wanted to achieve a straight horizontal orientation of each object as if it was floating in the air while rotating in 360 degrees. Our solution was this small DIY mini platform with two tiny stands made out of metallic paperclips that we then plugged into the piece of cardboard foam...".

Click on this image to read the full post that also shows a completed 360 video of one of the finalized flashlights (there was about a hundred of those!).


Sample 360 product photography setup using flashlights

 

Bookmark and Share

Cool 360 Photography By Low Alpine

by WebRotate 360 April 22, 2013 12:33

Here is another recent example of an excellent implementation of a 360 product view that we think truly stands out.

Produced by Lowe Alpine to showcase their high-tech backpacks, these 360 degree photos deliver one of the best online product presentations we've seen so far. See one of the sample 360 views here or just click on the image:

 

Example 360 degree product spin with hot-spots

 

The backpack pages feature nicely blended high-quality 360 product photography with neatly organized hot-spots, all tastefully crafted into website's look and feel (notice how all of our standard toolbar graphics have been overriden with custom imagery).

We are glad that the guys at Lowe Alpine picked our WebRotate 360 Product Viewer and put it into a good use!


Bookmark and Share

360 Product Views In OpenCart Are Now Possible

by WebRotate 360 April 04, 2013 15:48

Check out our brand new extension for OpenCart! As with our new WordPress module we released the other week, this extension features all of our latest enhancements and fixes that we have introduced so far in our core product WebRotate 360 Product Viewer. Like the awesome full-screen capability that you can see in this demo below. And yes, for those of you who wanted hot-spots in full-screen, this is now also possible.


To make a long story short, please see this OpenCart 360 View Demo and if you would like to give it a try, just follow these simple steps:


Step 1. Download

Download our OpenCart module using this link:


Download Extension »

[UPDATE: get the latest version directly from OpenCart.com]


Step 2. Copy files

Unzip webrotate360_opencart_integration.zip on your local computer and copy all folders from the webrotate360 folder to the root of your OpenCart installation. This will not replace any existing OpenCart files unless you already had a previous version of WebRotate 360 module installed.


IMPORTANT: If you are using vQmod, just copy vqmod_webrotate360.xml located in the root of the package to your vqmod/xml folder and jump to step 6 below (skip steps 2, 3 and 4).


Step 3. Find header.php

If using vQmod, please skip this step and jump to step 6 below. Otherwise, please find the following file in your OpenCart installation:

<Your OpenCart folder>\catalog\controller\common\header.php


Step 4. Update header part I

Make a backup copy of header.php then open the original file for edit and enter the following three lines right after the first line that reads "<?php" at the very top:


global $__wr360Path; $__wr360Path = 'catalog';
if(defined('DIR_APPLICATION')) $__wr360Path = preg_replace('/.*\/([^\/].*)\//is', '$1', DIR_APPLICATION);
include $__wr360Path.'/controller/module/wr360/wr360header.php';
 


Step 5. Update header Part II

Enter the following line right after this statement "$this->render();" at the end of header.php and save the file:


$this->output = addWR360Headers($this, $this->output, $this->db);


Step 6. Activate module and configure

Go to your OpenCart Admin and select Extensions > Modules and
click [Install] next to the WebRotate 360 module. Then select module's [Edit] to enable the module and set the rest of parameters by following the text notes under each field.

To see our test 360 view (included with the module), just enter the following url under Config File URL in the table next to your test product (remember to enable it in the table): /360assets/sampleshoe/config.xml. Or use a full url including your domain name, eg http://yoursite.com/360assets/sampleshoe/config.xml:



Step 7. Finish


Click Save to activate your changes.

 

PS: if you haven't created 360 product views with WebRotate 360 Product Viewer before, you would first need to download our software and follow this simple video tutorial to create your 360 views first and then just upload them to your OpenCart installation via FTP.

 

Bookmark and Share

360 Views In WordPress Made Simple

by WebRotate 360 March 27, 2013 12:09

Our new 360 product viewer for WordPress is ready! This time it has been implemented from scratch using various feedback we received from the users of our old plugin. In short, we are now using shortcodes that make things much easier and provide greater flexibility in what you can accomplish with your 360 spin photography or rendered 3D product views.

 

Main plugin features include:

  • Ability to add multiple 360 product views on the same page or post.
  • Gallery mode to show your 360 product spins in an expandable popup gallery.
  • Support for loading images from CDN or external servers or using a single config xml for multiple 360 degree photos.
  • Dynamic 360 viewer resizing if your are using responsive WP themes that adjust their layouts based on browser or screen dimensions.
  • And a slew of other features included in our core product WebRotate 360 Product Viewer 3.5 beta such as:
  • Rotation inertia (i.e gradual slowdown of 360 rotation).
  • Full-screen support.
  • New hot-spot presentation modes.
  • Mouse-hover dragging.
  • Improved support for mobile viewing.
  • APIs and more..


Check out WebRotate 360 Product Viewer Plugin for WordPress with usage instructions and a demo link.

Installation is quite straightforward (requires at least WordPress 3.0):

  • Download and install WebRotate 360 Product Viewer for WordPress  
  • Activate the plugin via the Plugins page in your WordPress Admin.
  • Upload your 360 product views published in WebRotate 360 SpotEditor to a chosen location on your WordPress server via FTP.
  • Review additional instructions for further details on how to configure shortcodes for your 360 product photos.

 

DOWNLOAD PLUGIN »


PS: if you haven't created 360 degree product spins with WebRotate 360 Product Viewer before, download our 360 photo publishing software (SpotEditor) and follow this video tutorial to create 360 product views on your desktop and then upload them to your WordPress installation via FTP.

 

Bookmark and Share

360 Product View In 180 Degrees. Why Not?

by WebRotate 360 March 22, 2013 18:44

Checkout this neat 360 product view by Triton Showers (and of course powered by WebRotate 360 Product Viewer). Note how their photographers decided to not show the back of the product which makes perfect sense - much simpler to mount and produce 360 degree product photography while showing only the sleek front and sides.

Why we like this one even more:

  • The use of a clean light-box popup.
  • Image-based interactive hot-spots.
  • Excellent 360 degree spin photography.
  • Cool touch shower with a temperature control - we want one!

 

To see it in action use this link or click on the image:

Example 360 degree product view with hot-spots

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, May 2017

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