Blog | WebRotate 360

3D Product View in Firefox Via Transparent PNGs

by NewsMaster March 09, 2015 14:32

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

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

3D product view of PulseOn wearable


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

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

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

 

3D product viewer settings in WordPress


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

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

 

Bookmark and Share

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

by NewsMaster February 18, 2015 16:48

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

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

Sample 3D product spin with one hotspot via retina skin

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

 

Today we're also releasing two new cool enhancements.

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

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

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

 

So lets review each of these additions:

MULTI-ROW SUPPORT

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


Import multi-row photography or 3D CAD renderings

 

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

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

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


Switch between rows of 3D product images

 

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

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


Adjust sensitivity of vertical rotation in your 3D product spins



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

 

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

api.images.getRowCount()
api.images.getCurrentRowIndex()
api.images.getTotalImageCount()
api.images.showImageByDelta(imageIndex, rowIndex) // new rowIndex (optional) paramter
api.images.showImageByIndex(imageIndex, rowIndex) // new rowIndex (optional) paramter
api.toolbar.moveRowUp()
api.toolbar.moveRowDown()


IMAGE DELAY

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


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


IN-BROWSER FULL-SCREEN

Simply check this checkbox to activate the new feature.


Limit full-screen function to browser window

 

GIVE IT A TRY AND LET US KNOW

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


DOWNLOAD BETA v3.6

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

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

 

Bookmark and Share

WebRotate 360 Product Viewer Integration For Prestashop 1.6 Has Been Released.

by NewsMaster January 20, 2015 13:24

It has been a long journey since the first version of our plugin for PrestaShop that has been introduced almost three years ago. Prestashop v1.3-1.4 that we had to deal with at that time didn't have advanced module integration like the recent PrestaShop releases and the first version of WebRotate 360 Product Viewer for Prestashop ended up being somewhat clumsy.

So it's with great relief that we can finally say that our completely reinvisioned and reworked plugin for PrestaShop 1.6 is finally available! It has all the bells and whistles of our popular plugins for Magento and OpenCart: from full responsiveness of your 360 product spins, viewer popup mode, 360 product viewer skins to custom prettyPhoto gallery integration & theming, Quick View support and more. All polished up with great care to work with your PrestaShop 1.6 themes and admin.


DEMO (via embedded 360 product view mode; popup mode is configurable)

DOWNLOAD


Click on the image below to navigate to our new PrestaShop demo:

 

INSTALLATION:

1. Click "Add a new module" under your PrestaShop Admin->Modules and navigate to webrotate360_prestashop_module_vX.X.zip on your computer to upload the module. Or install manually by copying or uploading the webrotate360 folder inside the zip to your PrestaShop modules folder.

2. Then navigate to your Modules tab in PrestaShop Admin, expand Other Modules and click Install next to WebRotate 360.

3. Select Configure on the WebRotate 360 module to configure the module as needed. Detailed field descriptions can be found under each configurable parameter.



4. Publish your 360 product views using WebRotate 360 SpotEditor (http://youtu.be/W3uFpXy1ne4) and upload them somewhere on your PrestaShop server via FTP. Note that you only need to upload a single folder that is auto-created under 360_assets in the published folder of your SpotEditor project upon publish.

5. Navigate to your Catalog->Products in Admin and add config xml URL for your uploaded 360 views under desired products in your catalog inside the WebRotate 360 tab. Sample 360 view & config xml URL is provided in the tab description.




DOWNLOAD


Let us know if any questions or issues on our forum or directly via email (support at webrotate360 dot com)!

 

Bookmark and Share

OpenCart 2.x Integration Has Been Released

by NewsMaster January 02, 2015 17:02

We have released a long awaited support for OpenCart 2.x which is a recent major release by the OpenCart team that we really really enjoy!

This time we completely reworked our integration for OpenCart 2.x to support gallery integration with skins (via prettyPhoto), an option to embed your 360 product view inside OpenCart's product image gallery via extra thumbnail / popup, full responsiveness as part of the new OpenCart layouts, 360 product viewer skins, multi-store support and more.


DEMO (via embedded 360 product view mode; popup mode is configurable)

DOWNLOAD


You can download the new module via OpenCart's extension store here. Just check out the Documentation tab there for specific OpenCart 2.x integration instructions using two vQmod files supplied with this release. Once the module is installed, please follow the text descriptions under each field on the WebRotate 360 module page in your Admin for detailed customization options.

 

Click on the image below to navigate to our OpenCart demo:


If you require any assistance or support with your integration or upgrades, please let us know on our forum or email us directly at support at webrotate360 dot com.


Please note that this release (v1.5) will not run on older OpenCart versions (prior to 2.x). 


PS: a quick screenshot of the module admin panel where you can see some of the new settings:

 

Bookmark and Share

WebRotate 360 Winter Holiday Sale! Save 30% on v3.5 PRO

by NewsMaster December 15, 2014 17:20

At last, we are pleased to announce a 2-day sale on WebRotate 360 Product Viewer PRO v3.5 this Thursday and Friday only (18-19th of December). We will offer a 30% discount ($90 off) on our most advanced 360 product viewer and dedicated publishing software to date.

We're doing this to promote our major product release (2 years in the making!) and it's the first and the last sale in 2014.

You can find more details about various new features that were introduced in WebRotate 360 Product Viewer v3.5 via our release summary here. In short though, we can finally say that v3.5 now represents a one-stop solution for all 360 product viewing needs.

What's more? There're no hidden fees or monthly commitment - it's a standlone "off-the-shelf" product and you decide how you or your clients will be using it. It's backed by our outstanding PRO support and 1 year of free upgrades. And we have a lot of plans for v4.0 in 2015!

Still not convinced? Just download and try our free version and check out our free CMS and eCommerce plugins here and let us know what you think.

So if you are shopping for a state-of-the-art eCommerce add-on this holiday season or just looking to add 360 product views to the list of your services in 2015, just mark the date and stay tuned! The coupon code will be published on Wednesday night PST on our Facebook, Twitter, G+, and here on our blog.

 

The coupon code is  SAVE2014   

Just enter this code at checkout HERE

 

Bookmark and Share

Announcing Major v3.5 Release of WebRotate 360 Product Viewer

by NewsMaster November 20, 2014 17:05

Although the release build of WebRotate 360 Product Viewer v3.5 has been available since mid-September 2014, we still had to spend some extra time bringing our most popular eCommerce and CMS plugins up to speed before we could finally announce this major release here on this blog and in our newsletters.

Today, WebRotate 360 Product Viewer plugins for Magento, OpenCart, WordPress have been revamped to support the latest and greatest. As we were implementing these updates, we also introduced our new Joomla plugin which we hope a lot of folks will find useful.

So now it's official, v3.5 is out! If you are still using an older version of the product, we recommend upgrading soon.

v3.5 incorporates these major changes and enhancements:

  • Revamped SpotEditor with 360 product image editing, publishing templates, FTP, watermarks, and more
  • New skins and graphics, read more
  • Animated GIF publishing, read more
  • Hotspot actions, read more
  • API (application programing interface) for advanced customizations, read more
  • Full support for responsive websites
  • Integration via jQuery plugin
  • Discontinued Adobe Flash support
  • And a lot more! See full product history

 

Commercial version of this release is available to all our past customers free of charge. 

If you have purchased either WebRotate 360 PRO or Enterprise before and haven't received updated download links and / or spoteditor.code for activating your desktop software (or the download links that we sent you before stopped working), please request it now via quick email.


Download free version
Quick demo
Updated User Guide

 

Bookmark and Share

Use Your WebRotate 360 Product Views in Joomla Via Our New Joomla Plugin

by WebRotate 360 November 18, 2014 17:30

Joomla came a long way since the Mambo days and we are proud to say that we have followed its evolution each step of the way. Without a doubt it became one of the most popular CMS platforms and the 3.x release catapulted Joomla even further.

This is why we didn't think twice and ported our battle-hardened feature-rich shortcode engine to Joomla to support the most flexibility our integration modules had to offer. So without further adieu, please welcome WebRotate 360 Product Viewer for Joomla!


DEMO


Download from Joomla! Extensions Directory


To start with the plugin, please visit our Joomla extension page on Joomla! Extensions Directory and click any of the Download buttons to download the plugin to your computer first. Then login to your Joomla Admin panel, select Extensions Manager in the top menu, click the Browse button on the Install tab and pick your downloaded zip to start the plugin installation.

The last step is to enable the plugin in Plugin Manager and specify any defaults for your 360 product views on the plugin settings page that should look like this:

Just hover with your mouse over the text lables next to each field on the settings page as shown above to see what each of them stands for.

The rest of the integration is done via simple shortcodes that are summarized in detail on our Joomla demo page. In short, you can use two of the available shortcodes to either embed your 360 product spins directly inside any of your Joomla content or launch your webrotate 360 spins inside the lightbox popup which also supports gallery mode.

All available shortcodes are also supported inside K2 content extensions and even VirtueMart product desriptions! More shortcode types will be available soon.

Please also note that there is one sample 360 product view located under the webrotate360 plugin folder under 360_assets. To try this sample in your test shortcodes, use the following config path as per the shortcode examples on the demo page: "/plugins/content/webrotate360/360_assets/sampleshoe/config.xml"

 

Bookmark and Share

Version 2.5 of WebRotate 360 Product Viewer for WordPress

by WebRotate 360 November 10, 2014 12:17

Just one month after our initial update of WebRotate 360 Product Viewer for WordPress to support the "latest and greatest", we did a major overhaul and just released version 2.5 of the plugin.

This release was done primarily to introduce plugin defaults in WordPress admin to save you time adding shortcodes, easily change viewer and popup skins, set Master Config XML for all your 360 product views at once, and similar.


Summary of the latest changes and additions:

  • ADDED: new plugin settings page with various defaults.
  • ADDED: drop-down with 360 product viewer skins.
  • ADDED: drop-down with prettyPhoto / popup skins.
  • ADDED: defaults for viewer dimensions, basewidth, Master Config, etc.
  • ADDED: new shortcode parameter to allow disabling browser optimization when using PNG images with opacity (imageopacity="true").
  • ADDED: latest version of WebRotate 360 Product Viewer v3.5 scripts and graphics (free version).
  • FIXED: prettyPhoto margin calculations was reworked to show correctly on small device screens.
  • FIXED: shortcode width and height are now correctly parsed whether "px" was supplied or not.
  • NOTE: if using PRO, you may need to re-apply your license.lic as it's removed by WordPress upon upgrade. Simply copy it under the root of the webrotate plugin folder or specify its new location on your server using the new plugin settings page (this way it will not happen next time you upgrade the plugin). You may also need to request the commercial version of imagerotator.js or use the one from any of your published SpotEditor PRO projects located under published/imagerotator/html/js and copy it to wp-content/plugins/webrotate-360-product-viewer/imagerotator/html/js.


New and updated WordPress demo page is available here

DOWNLOAD PLUGIN

 

Bookmark and Share

WebRotate 360 Product Viewer Integration for Magento Has Been Updated

by WebRotate 360 October 29, 2014 11:46

We just uploaded a new version of WebRotate 360 Product Viewer for Magento (3.5.5). This is part of an ongoing effort to have all our plugins to be inline with the major v3.5 release of the core product that was out last month, as well as to support latest platform updates such as Magento 1.9.x, OpenCart 2.0, etc.


This latest Magento update adds several important enhancements:

1) RWD design package is now supported out of the box. As you probably know, Magento has recently introduced a new design package called RWD, featuring a cool-looking, modern responsive layout. We saw many folks in the Magento community reusing some the RWD functionality by simply building their customizations on top of this new design. To make their lives easier, we now automatically install a fine-tuned version of our template under the rwd design as well.

2) WebRotate 360 Product Viewer v3.5 introduced a couple of new viewer skins and a bunch of new hotspot indicators (more on it can be found here)! Changing the skins with our previous releases of the Magento extension was complicated and required modifications in the module files. Now you can simply choose any of the built-in skins that come with the core product via the Viewer Skin drop-down in the module settings in Admin. Please note that starting with this release of WebRotate 360 Product Viewer for Magento we now install all module's skin files under the base skin folder vs the default one we used before and this is also where a sample 360 product spin and the actual viewer script live now.

3) As with the other modules we updated recently, there's a new setting called Responsive Base Width where you can specify the original / default width of your 360 product views in Magento which forces the viewer to scale its height responsively and relative to the current viewer width. You can think of the base width as the default 360 product viewer width in pixel that you expect your visitors to see when your responsive Magento theme is not scaled to fit a smaller screen size. This is usually the width of the fitted 360 degree product images that you would configure under the Interface tab in SpotEditor.

4) prettyPhoto was enhanced to not have any margins when it auto-resizes to fit into small device screens. This way even on small mobile devices no screen space is wasted when the lightbox is used for gallery images or 360 product views.


Version 3.5.5 of the Magento integration for WebRotate 360 Product Viewer is now live and can be installed directly from Magento Connect.

 

Bookmark and Share

WebRotate 360 Product Viewer Integration for OpenCart Has Been Updated

by WebRotate 360 October 17, 2014 21:28

Happy to announce that WebRotate 360 Product Viewer for OpenCart has been updated to work nicely with the final release of v3.5. This update also adds a couple of handy extras:

Responsive height

With our previous releases of the OpenCart integration, you could easily make your 360 product spins integrate seamlessly with responsive OpenCart themes by setting the viewer width to a relative number (e.g. 100%) in the module settings. This worked fine with just one exception common to most CSS layouts - the height of an element inside a responsive layout can't simply scale relative to its width without extra javascript handling. We had a solution to this issue in the core product for a while now, but the OpenCart integration was still lagging behind. Not anymore!

Using our new module setting called Responsive Base Width you can specify the original / default width of your 360 product views in OpenCart which will force viewer to scale its height responsively and relative to the current viewer width. Think of the base width as the default 360 product viewer width in pixel that you expect your visitors to see when your responsive theme is not scaled to fit a smaller screen size. This is usually the width of the 360 view images that you would set under the Interface tab in SpotEditor.

Viewer Skins

v3.5 release of WebRotate 360's core product introduced a couple of extra \skins as well as the "empty" skin for your advanced customizations (a bit more on this can be found here). Changing the skins with our previous version of the OpenCart integration was complicated and required modifications in the module. Now with the latest OpenCart update you can simply turn on any of the built-in skins that come with the core product via the Viewer Skin drop-down in the module settings and that's it!

New settings in OpenCart module


Version 1.3 of the OpenCart integration for WebRotate 360 Product Viewer is now live and can be downloaded here.


NOTE: If you are migrating to the recently released OpenCart v2, we have a working plugin for it as well. It will be posted online asap, and it's available now upon request .

 

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, March 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