Blog | WebRotate 360

WebRotate 360 Product Viewer Integration for OpenCart 2.2.x and 2.3.x

by NewsMaster September 22, 2016 15:28

Announcing the release of v1.6 of our OpenCart integration. This one took some time as OpenCart had some major changes starting with version 2.2.0.0. We also wanted to incorporate all of the latest features that we have been releasing this year as part of v3.6 (version history).

So now you can enjoy multi-row 3D product views, Google Analytics integration, new styling with svg skins, new hotspot modes and various other improvements and fixes. This also allowed us to take some time to polish up our admin dashboard to look good and consistent with the rest of the OpenCart admin eco-system.

Folder structure of the module was re-worked to comply with the new OpenCart guidelines, so if you are on OpenCart 2.2.0.0 or 2.3.x and upgrading from the previous version of the webrotate plugin, it's best to remove the old plugin files first and then re-install using the new download links.

To remove old plugin files, please delete these files and folders fist:

  • admin\controller\module\wr360
  • admin\controller\module\webrotate360.php
  • admin\model\catalog\webrotate360.php
  • admin\view\template\module\webrotate360.tpl
  • admin\language\english\module\webrotate360.php
  • catalog\controller\module\wr360

You will also have to delete this webrotate vQmod file as it has changed as well:

  • vqmod_webrotate360_header.xml

Good news is that the database structure hasn't changed, so all your existing 360 product view configurations will remain intact and will still work with the latest version of the core 360 product viewer.

We now also have a dedicated page for the OpenCart plugin where you can find the latest downloads and instructions as well as the version history:


WebRotate 360 Product Viewer Integration for OpenCart


 

If you have any issues with the installation or upgrade, please let us know.

 

Bookmark and Share

Shopify Integration for WebRotate 360 Product Viewer Released

by NewsMaster September 01, 2016 11:07

Happy to announce that the first version of WebRotate 360 Product Viewer for Shopify has been released.

This time it's a full blown web application that neatly hooks into your Shopify dashboard while providing all latest features we released so far in v3.6. It's quite flexible too and should work with pretty much any Shopify theme or fine-tuned further by a Shopfiy theme developer as needed. And it's free!

Note that Shopify doesn't allow uploading folders to their file hosting yet which is required for WebRotate 360 and 3D product views to operate, so a separate hosting account is necessary. You may use any existing FTP account, setup an Amazon S3 account, etc.


Read more and install the app


 

Bookmark and Share

Version 3.6 Release Candidate Is Available For Download (Build 1367)

by NewsMaster July 27, 2016 11:17

v3.6 Release Candidate is now available for download! It includes a long list of improvements, new features and fixes that you can review here. These changes and updates were mostly driven by the work we have done on our new website in the last 6 months.

It could have been the final v3.6 release, but we still have to update the user guide and the info tooltips inside SpotEditor and it takes somes time.. Otherwise, it's a solid release that we recommend to all our users.

There're two major additions that most users will notice:

1. Vector SVG images are now used across all of viewer resources (no more raster graphics!). This ensures that your viewer skins and hotspots look sharp on any device. We also completely restyled two existing skins (thin and round) to look modern and usable with a greater variety of website designs out there. Also, all of the skins finally have the row navigation buttons for your multi-row 3D product views.

2. There's a new "shortcode" integration mode and publishing template which removes the viewer script snippets from your pages completely. This can drammatically simplify your website integration with various CMS platforms, especially when there're multiple 360 product views on the same page. Documentation is still in the works but you can simply select Shortcode template on the Publish form in SpotEditor and see it in action.

If you are a developer, this release adds a good number of API improvements, giving you more options for major viewer customizations. All new APIs are listed in the JavaScript template that you can select on publish in SpotEditor (and then explore the source html for additional bits and pieces as needed). Not to mentioned the long awaited support for jQuery 3.0!


DOWNLOAD v3.6 RC


Previously released features and fixes in v3.6:

 

PRO & Enterprise customers can request the commercial version of v3.6 RC via support. If you received v3.6 beta download URL from us before, it still works! And if you already have a 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), just let us know and we would be happy to assist.

 

Bookmark and Share

New WebRotate 360 Website Launched

by NewsMaster June 20, 2016 12:41

Happy to announce the launch of our new company website. It's built by us from scratch in-house based on years of hard work, helping our clients with their website needs. It's CMS driven, which will help us keep it always up to date with latest news, examples, releases and more.

Maybe even more importantly, it's fine-tuned to work nicely on modern mobile phones and high pixel density displays. It's super responsive and the demo 3D product views are optimized for mobile viewing so you can see the difference! More examples will be released soon and we will gradually move this blog onto the new platform as well.

The new website also represents the change in our vision after almost 7 years of delivering the most advanced 360 product viewer, related tools, software and services. Finally, we narrowed down our message to a few clear terms and examples that most of our users can relate to.

Also, starting from June 2016, we will be donating 5% of all product sales to selected charities that work in wildlife conservation and animal welfare which is one of the global issues all of us at WebRotate 360 are concerned with.

Stay tuned for more updates!

 

Bookmark and Share

Multi-row 3D Product View With Automatic Hotspot Labels

by NewsMaster May 23, 2016 12:38

Here's an interesting demo we did a few days ago of one of the cool features in v3.6 that allows combining multi-row 3d product views with image labels. These labels can be assigned to hotspot actions to produce pretty impressive product tours that can guide users from one product feature to another. Possibilities are endless, considering that you can have these hotspots and / or label actions in any form or fashion (lightboxes, custom popups, you own page content, apps, etc).

All of this is already available in the latest v3.6 beta that you can download here (it's stable and has been used in production by many companies for the last 6 months).

 


Final v3.6 release is right around the corner (and our new website undergoes the final preparations for going live!).

 PS: the excellent 3D product photography was produced for JVC by our friends at Flipside Studios in Berkeley, CA.

 

Bookmark and Share

Final v3.6 Beta Release (Build 3.6.0.1046) Is Out

by NewsMaster February 03, 2016 12:28

Today we’re releasing our last v3.6 beta build before the final release. It’s packed with new features, enhancements and bug fixes.

As you can see in our product timeline, this new beta release took some time… This is because with this release we wanted to address some of the shortcomings that cropped up in the last two years which required an overhaul of a significant chunk of functionality. The main area of improvement in this release is a better mobile support, drastically improved hotspot presentation & handling and more control over multi-row 3D product viewing.


LIGHTBOX HOTSPOT


We're really excited about this new hotspot mode. It makes it possible to showcase your hotspots with images and text at the same time in a consistent and flexible manner. Even more importantly, this new mode is our most mobile friendly yet as it takes the entire space of your 3D product viewer and gives enough real estate to deliver your hotspot message "responsively" on any screen size. We also went to great length to give you a lot of control over the lightbox presentation!


To start with this new hotspot mode, first select "Rotating indicator with content in lightbox" on the main Hotspot tab under "Render as". Then add your image and text on the Image Content and Text Content tabs and fine-tune your presentation further with a set of new settings that you will see on these tabs.

On the Image Content tab (as shown below) the following options are applicable to lightbox:

-  Background
Select your lightbox background color.

- Cover background in lightbox
This means that your lightbox image is not just squeezed to fit proportionally into the lightobox, but rather it makes sure that the image covers the entire lightbox space without any see-through gaps. This may result in some parts of the image not being visible (depends on the image proportions relative to viewer size) but may give you a much nicer presentation when you need to zoom in on a certain product feature or simply need to entirely cover the lightbox space.

- Show close button in lightbox
If selected, we will show a small "close" button in the right corner of the lightbox popup. We made it such that the icon is visible on both dark and light backgrounds but if you decide to customize it for your 360 product views, the image name is lightbox_close.svg and it's located in the published skin folder and is the same for all skins.

-  Active on click in lightbox
This controls whether lightbox should respond to clicks or taps outside of the close button. If it's checked and there's no action assigned on the Action tab, a click or tap inside the lightbox will simply close the lightbox. If action is assigned, it will be launched accordingly.

If it's not checked, nothing happens on click or tap unless user hits the close button. A notable exception to this rule is when you have an embedded URL link in your lightbox text that you enter on the Text Content tab that we discuss further in this post. So when there's an empty URL (not linked to any website) inside the text content, a click on tap on the hyperlink will trigger a hotspot action if it’s assigned on the Action tab. Otherwise, such hyperlink will just navigate to your linked website.

Text Content tab has been completely reworked in this release. Please see more details about the changes and how they apply to the new lightbox hotspot in the following section.

 

TEXT CONTENT STYLING

Finally, you can really style text inside your hotspots popups (and now lightboxes as well!). As you can see in the following screenshot, the possibilities are pretty much endless with custom fonts, text align, line height, padding, opacity, border control, colors and more.

Also, now you can have all the handy styling as well as HTML markup such as URL hyperlinks without switching to custom styling mode. But if you really need a completely custom styling for your hotspot text, just select "Use custom styles" and none of the style settings will apply (this replaces HTML mark mode we had in previous releases), and you can then use your own CSS to style the text content as needed via .hotspot_cdata CSS class that is assigned to such “unstyled” hotspot element.

Note that when text content belongs to a lightbox hotspot as discussed in the previous section, the Width field is measured in % and in most applications would need to be set to 100%. Most likely you would also want to set your border width to 0 as well in that case as it should look nicer without text borders inside the lightbox.

PS: if you wonder how to configure the new Padding field, it follows standard CSS padding numbering where the padding value of 15,20 means that the top and bottom padding is 15px while the left and right padding is 20px. The padding value of 15,20,30,40 means that the top padding is 15px, right is 20px, bottom is 30px and the left padding is 40px.

 

HOTSPOT ACTIVATION

There're two major hotspots enhancements in this build for hotspot activation and deactivation. First, a click or tap on a hotspot indicator will now trigger a hotspot action if assigned even when there's no image or text content (i.e no popup or lightbox). Previously, you could only trigger the hotspot actions inside a popup which was quite limiting. This small feature required a complete overhaul of the hotspot handling as clicking and taping is handled quite differently on touch-screen devices and the hybrid ones that can have both mouse and touch input.

The second enhancement is a new hotspot deactivation mode (Deactivate on click) which you can now select on the first tab of the hotspot form to make sure the hotspot popups close only when user clicks again on activated hotspot indicator or when the click is outside of the hotspot popup. In our previous released, the popups would close immediately when user's mouse would leave a hotspot popup or the indicator icon.

 

HOTSPOT JAVASCRIPT ACTION

There's a new hotspot action that can trigger your custom JavaScript function on tap or click on the hotspot indicator or inside a popup or lightbox. Simply select JavaScript action on the Action tab and then enter the name of your JavaScript function. The function receives a single parameter which is an object containing all configuration settings of a hotspot that triggered this action. Please note that the same can be achieved using our new advanced hotspot APIs as discussed in the following section.

Example:

<script type="text/javascript">
function yourCallbackFunctionName(hotspotConfig) {
  // Handle your custom action here
}
</script>



HOTSPOT APIs


With the release of APIs in v3.5 about a year ago and some recent API additions for multi-row 3D product views, you could already control most of the viewer functions. Hotspots for the large part were still inaccessible until this release.

Now you can pretty much take over the hotspots in every possible way. Let’s briefly review the new API functions and you can then simply publish your 360 or 3D product view in SpotEditor using the JavaScript template (which was also updated) to see these APIs in action:


api.hotspots.activate(hotspotName, optionalTimeout);

Activates content of a hotspot identified as hotspotName (the one you enter on the Hotspot form in SpotEditor). In most cases, this will automatically open associated hotspot popup that will be kept opened for the number of milliseconds that can be optionally passed via optionalTimeout.


api.hotspots.deactivate(hotspotName, optionalTimeout);

Closes a hotspot popup that was previously activated (opened) via the API or manually.


api.hotspots.onActivate(function(hotspotData){ return false; });

This callback is executed when user or API triggers the opening of a content popup or lightbox. hotspotData contains a lot of info about the hotspot including its xml configuration, allowing you to override the hotspot content on its first activation. Return true to prevent default hotspot popup rendering or false, to let the viewer render the popup.


api.hotspots.onDeactivate(function(hotspotData){ return false; });

This callback is executed when user or API deactivates hotspot content, i.e. when a hotspot popup or lightbox is being closed. Return true to prevent default deactivation logic.


api.hotspots.onAction(function(hotspotConfig){ return false; });

This callback is executed when user triggers a hotspot action that can be assigned under the Action tab in SpotEditor. Note that unlike the previous two API callbacks, this function only receives the hotspotConfig parameter which doesn’t include supporting data such as current hotspot indicator coordinates, visibility, or a reference to a parent (viewer) container. Return true to override default action handling.


api.hotspots.getDynamicHotspots();

Returns an array of all hotspotData objects (for dynamic hotspots only, i.e. the ones that have a moving indicator), allowing you to customize them on the fly (if done before the first popup activation), checking indicator visibility, etc.

 

HOTSPOT POPUP POSITIONING

We added more flexibility to the way you can position popups when “Render as” is set to "Rotating indicator with hover-over popup centered on top" as highlighted in the following screenshot.
You will notice now that the margin based position controls on the right side of the Hotspot form are enabled when this render mode is selected and even though we will still pre-select the center position by default, you can actually click on the radio-buttons on either side of the grid and specify pixel margins as well.

This allows for more elaborate hotspot presentations where hotspot popups can appear next to a hotspot indicator on either side of the indicator image with configurable offset without obstructing highlighted image features. Note that the margin entry is done at the two opposite sides of selected radio-button which is done for consistency with other hotspot rendering modes that also use the margin based controls.

MOBILE VIEWING

Besides our new mobile friendly lightbox hotspot, there’re several other interesting enhancements in this release that can improve your 3D product spins on modern mobile devices.


Use SVG images in hotspots
Previously you could only use raster images (JPG, PNG, ets.) for your hotspot indicators or hotspot content images (popup images). Now you can also select SVG images for both such that they look sharp at any screen density.


Responsive hotspot content images
There’s a new setting under Image Content tab of the hotspot form called Scale Responsively. As the name implies, the images will resize automatically with the viewer if it’s part of a responsive website layout when this setting is selected. This was not fully supported in our older releases.


Control max image width in hotspot content images
Since now you can configure the hotspot content images to scale responsively, this setting can help ensuring that the images do not go beyond a certain width such that they look sharp at any resolution or screen density.


responsiveMinHeight
This new viewer setting can be used to set minimum height of the viewer when it’s part of a responsive layout. This can be helpful on small mobile screens where you may not want the viewer height to go beyond a certain fixed minimum. To see how it’s configured, publish your 360 or 3D product view using Responsive template that can be selected on the Publish form. Then change the value of responsiveMinHeight that you will see in the published html file from 0 to some meaningful minimum.


Double Tap Zoom and Full-screen
Zooming on double-tap on mobile devices was disabled in one of our old 3.x releases. We just couldn’t achieve sufficient consistency across various smart phones at that time. Now it’s all resolved and works great! We also added a new “double tap” option in SpotEditor to make the product viewer switch into the full-screen mode instead. These settings are located under Control->More Options tab.

 

3D PRODUCT VIEWING (MULTI-ROW)

Several improvements were introduced in this build to help with multi-row product views, where images can be rotated both horizontally (our standard 360 product viewing) and vertically.

Full multi-row loop
There’s a new option in SpotEditor called “Do not loop vertical rows”. It controls whether to loop through the rows when you drag images vertically or to bounce at the first or last row if your 3D image renderings or 3D product photography doesn't have a full set of rows to cover all angles in a vertical spin (usual scenario). We were bouncing rows by default in the previous releases and until now there was no way to change this behavior.

 
Unlimited number of rows

New Project form now allows importing a configurable number of rows. Previously we were limiting it to 20 which (as we quickly found out!) was not sufficient for some advanced uses our clients had in mind.

 
Y-axis / X-axis sensitivity preview inside SpotEditor

Previous v3.6 beta introduced two new parameters in SpotEditor, Y/X-axis sensitivity, allowing you to make 3D object spinning more predictable as you can better control when it’s ok to spin rows vs flipping image frames (within a row). With this release, an immediate preview of the effect of this setting is available inside SpotEditor.

 
Toolbar and keyboard shortcuts

Flipping rows in SpotEditor was made simple: use updated toolbar controls with the up & down arrow buttons or navigate your 3D product view simply by pressing up, down, left and right keys on your keyboard (the keyboard shortcuts are not limited to just the Hotspot tab anymore!).



MISCELLANEOUS

  • Full monitor “full-screen” now works in IE11 and Edge browsers (other major browsers have been supported since the feature was introduced in v3.0).
  • There’s a new button on the Hotspots tab next to the gear (hotspot settings) icon, which creates a duplicate copy of any currently selected hotspot. This can be a real time-saver.
  • Control tab has been divided into two sub-sections: Rotation and More Options.
  • There’s a new setting called “Flip horizontal input” in SpotEditor under Control->Rotation tab. It makes images spin in an opposite direction to mouse or touchscreen drag. Note that we have existing settings for rotation direction control (Clockwise and Counterclockwise), but these settings also affect the automatic playback direction and this doesn’t always work when the images are produced with a certain playback sequence in mind. So this new setting addresses such special cases.

 


DOWNLOAD BETA v3.6


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

WebRotate 360 Product Viewer Integration For Weebly

by NewsMaster November 17, 2015 11:36

As with Squarespace that we have integrated not long ago (see here), Weebly still lacks support for third-party plugins. So our approach to integrating with Weebly is very similar to Squarespace which also shares some similarity with the embed shortcode in our WordPress and Joomla plugins.

Weebly also doesn't have an online storage option for uploading your 3D product views, so you would still need a place online (FTP, Amazon S3, etc) where you can upload your published 360 or 3D product views. The good news is that having spare 5-10 GB online these days doesn't cost much and there're plenty of options.

Now lets review how to integrate your published webrotate 360 product views in Weebly.

 

DEMO

 

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 http://my-domain.com/360-views/my-product/my-product.xml). You'll will need this file's URL for the next steps.

4) Login to Weebly and navigate to Settings -> SEO


5) Paste the following lines under Header Code and click Save.

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.webrotate360.com/lib/imagerotator/3.6/js/imagerotator.js"></script>
<link href="https://cdn.webrotate360.com/lib/imagerotator/3.6/css/retina.css" rel="stylesheet"/>

 


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

 

6) Close Settings and expand a Weebly page where you would like to add your 3D product spin.

 

7) Select Build and drag the Embed Code widget onto your page as needed.


 

8) Click on the embed code widget that you have just placed on your page to enter the edit mode and paste the following snippet, replacing the URL next to "xmlfile" with the one your have uploaded in the previous step. Change width and height values as well to make it fit well into 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='{
    "xmlfile":"http://your-config-url.xml",
    "graphics": "https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina",
    "basewidth": 1024,
    "minheight": 400
    "events": true,
    "name": "my-view",
    "rootpath": "http://my-cdn-for-images.com/product1/",
    "onready": your-javascript-callback}'>
</div>

  • 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 with our default hotspot indicator images via our CDN (Amazon S3) so this path will work https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina, 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

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: http://xquartz.macosforge.org/landing/

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

 

DOWNLOAD

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!


PS:

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.

DEMO


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 http://my-domain.com/360-views/my-product/my-product.xml). 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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.webrotate360.com/lib/imagerotator/3.6/js/imagerotator.js"></script>
<link href="https://cdn.webrotate360.com/lib/imagerotator/3.6/css/retina.css" 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='{
    "xmlfile":"http://your-config-url.xml",
    "graphics": "https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina",
    "basewidth": 1024,
    "minheight": 400
    "events": true,
    "name": "my-view",
    "rootpath": "http://my-cdn-for-images.com/product1/",
    "onready": your-javascript-callback}'>
</div>

  • 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 https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina, 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

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, December 2015

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