• v3.6.2 Beta Released. Now with Incremental Zoom and More

    What was supposed to be a maintenance release with minor fixes and improvements, v3.6.2 is gearing up to be a hefty update, featuring some major new functionality and important enhancements. Let's review some of the features that we think should convince many webrotate users to upgrade soon or just skip to the last paragraph to learn how to download the latest v3.6.2 build or review our full version history here.

    First things first.. new incremental zoom

    With v3.6.2 you can configure the number of steps or increments that it takes to magnify images to their original dimensions. Whether you configure your 360 or 3D product views to use the second set of high-resolution images for zooming (and full-screen) or you have a single image set for everything, the incremental zoom will work just fine and the same zoom toggle button in the viewer toolbar is used to control the increments if they are configured.

    As of v3.6.2 build 133, the zoom-out action is always a single step though as this seems to be most useful for an average end-user. But if you need to increment the "zoom-out" action as well, we have a new API to control the incremental zooming both ways. On top of this, you can supply a viewer coordinate (x,y) to specify the exact location to magnify at a given increment (the coordinate parameter is optional):

    api.images.zoom(zoomStep /* 0 to max step */, { x: xCoord, y: yCoord });

    Think about the possibilities this can bring... For example, the new API can be combined with the hotspots APIs or your custom page controls where you can spin the view to a desired product feature while magnifying the desired image location at the same time and followed by a popup call-out with feature details. We should do a good example on this!

    The overhaul of the zooming functionality allowed us to add a new option to change zooming speed as well. It has been always 300 milliseconds which is still a default, but you are in control now. The option can produce really smooth results which will largely depend on the number of configured increments and the image dimensions.

    To configure both the increments and zoom speed, go to Controls->More Options->Zoom and update the zoom settings accordingly:

    Selective zoom

    We made a couple of attempts to implement selective zoom in v3.0 of WebRotate 360 Product Viewer and it didn't work out. Now it's done and works really well on both desktop and mobile. Combined with the incremental zooming, you can now double-tap, pan, double-tap, pan, etc and it will zoom-in precisely to your "selected" area of interest. This will give your visitors an extra tool for product exploration and research.

    Selective zoom is enabled by default but if you have a good reason for making it optional, let us know.

    Rows on single index

    We have covered this feature in the recent blog post (New 3D Product Rotation Mode) so if you haven't seen it before, check it out. It's a great answer to our users who find the full spherical or hemispherical 360 product photography or 3D product rendering too time consuming or too slow for the end-user.

    In order to create such 3d spins, you will need to produce two rows of images. For example, you may photograph or render a horizontal row of 36 images (camera is stationary and the turntable makes a full 360-degree spin) and a vertical row of 20 images (camera moves vertically in a circular motion around the object). Then create two folders on your hard-drive and copy the horizontal images to one folder and the vertical ones to another.

    Start a new project in SpotEditor, pointing to the folder with the horizontal images on the New Project form. Once images are loaded, go to Images->Rows and click on the plus sign to start adding additional rows. Set the number of rows to 20, i.e it should be equal to the number of images in your vertical spin, and point to the folder with the vertical images as per the following screenshot and select Ok to create the extra rows:

    Check "Rows on single index" under Controls->More Options->Miscellaneous and then pick an image in your horizontal row that matches the starting point of the vertical spin and set it "as first" under Control->Rotation->On view load.

    Adjust X-axis and X-axis sensitivity under Controls->Rotation->Speed for best results (for example, try 3 and 5 for Y and X respectively):

    Now you can publish the project and it should work similar to this example.

    Flip Axis

    While sounds minor, this new function can be handy if your products are best viewed when they are presented in a single-row vertical 360-degree spin. In the previous releases a single-row spin could only be rotated via a horizontal drag (mouse or touch) which understandably looked odd when a product was actually turning vertically on the screen. This was especially noticeable on large touch-screen devices like what you can see here.

    Now you can check Flip Input Axis under Control->Rotation->Direction to request viewer to treat the vertical mouse & touch input as horizontal and vice versa, so if you swipe across the screen vertically, the product will follow you touch gesture.


    Free version is available for download in the following link under "additional resources" and all our users who have previously upgraded to v3.6.0 should be able to download this update on the About form in SpotEditor (or request directly).


  • WordPress Plugin Update 3.1.3 With WooCommerce Gallery Integration

    We have just released v3.1.3 of WebRotate 360 Product Viewer for WordPress. The most notable additions in this update include WooCommerce gallery integration (which has been unavailable since WooCommerce released their v3.0) and two new popup skins (light_clean and dark_clean). The popup skins use vector graphics to look sharp on modern mobile devices and HDPI screens and in general they look quite more modern than the original prettyPhoto skins.

    Here's the complete list of enhancements and fixes in this release:

    • Introduced product gallery integration in WooCommerce.
    • Added new popup skins with vector graphics (light_clean, dark_clean).
    • Added viewerskin parameter in popup shortcodes. Supports empty, retina, basic, thin and round viewer skins (now you can have popups with different viewer skins on the same page).
    • z-index was lowered across viewer elements to work better with WP themes.
    • Updated viewer CSS for sharper image rendering in Chromium based browsers on Windows.
    • Added dummy license.lic to prevent 404 errors from slowing down loading of the 360 product viewer in the free version.
    • Background color property now works for popup shortcodes.



    The entire contents of any previous webrotate plugin installation in your WordPress will be removed upon updating the plugin (unless you manually copy the new plugin files and folders to your FTP). If you have any webrotate assets (360 or 3D product images and configuration files), a license file, etc that you keep in the webrotate plugin folder, make sure you backup the existing plugin folder (/wp-content/plugins/webrotate-360-product-viewer) before proceeding with the plugin update.

  • 360 Product Photography Upside Down

    Today we will go through one of our 360 product photography setups that we produced for Just5 back when we were a full-time 360 product photography shop. It's one of those setups that is worth sharing as it's unusual and can be used for a variety of  projects.

    The Challenge

    At the time, Just5 was mostly manufacturing simple cell phones with large keys and an SOS button that worked great for elderly and kids. We were asked to produce a bunch 360 product views of their new line of phones (multiple colors and combinations). As with pretty much any cell phone these days, it's quite difficult to keep it upright on a flat surface on its own, and even if you manage to keep it steady on a spinning turntable, it's tough to make the bottom mount spin smoothly, i.e without a noticeable wobble.

    So the decision was to mount the phones from the top to ensure we could produce a tight 360 degree spin. We have done top mounting in the past but with much larger products and some cumbersome rigging and mostly manual turning. This time we wanted to automate the process using one of our older turntables (we had a bunch of kid toys coming our way after Just5 so the plan was to reuse the setup as-is and save a lot of time!).

    The Rig

    Luckily all phones we received had a tiny socket at the top which was perfectly centered so it could be used for our rigging. If there was no socket like this, or if it was not nicely centered , we would likely drill through the phones at the same spot - the Just5 phones were relatively cheap comparing to the production cost of the 360 product spins.

    We then drilled two holes through the turntable base at the two opposite corners so we could attach it to an arm on a C-stand (on a metal plate) upside down. The table we used was quite old - we probably photographed a couple of thousand products on this table by then, so we didn't worry much about drilling the holes. But you may void your warranty or ruin the table if you do this!

    We already knew the thread number of the mounting socket at the top of the turntable platform so we ordered a small aluminum pipe and a bolt with a tap tool so we could cut the same thread in the tube.

    The head of the bolt was cut with a hand metal saw giving us two threaded ends to connect the tube with the platform.

    The power plug was cut out from one of the phone's adapters and we glued it with epoxy to the tube.

    Below you can see the final assembly from one of the 360 product shots. Note how we attached a strip of white paper at the end of the tube to give us smoother reflection on the chrome-like edge at the top of the phone. Still, we had to go manually through most of the 360 degree images and smooth out the reflections in Photoshop.

    We have recently moved all posts from our old photogear360 blog here, so here's some related material you may find useful:

  • New 3D Product Rotation Mode

    We just devised a new 3D product rotation mode which was a result of a simple user request on our forum. Here's an initial "raw" example:

    The new rotation mode is awesome and it's surprising we missed this possibility in v3.6 in the first place.. With this mode you can photograph or render just one vertical movement around an object vs multiple rows of many images. And you can go as smooth as needed in that you can have as many vertical increments as your heart desires without sacrificing production times or 3d viewer performance.

    So where's the trick? The spin always falls back to the single horizontal row whenever you drag the images horizontally, which doesn't look too bad!

    With this mode you can:

    • Drastically reduce the number of images in a 3d spin as there are no more rows with unique images on each index (except for the main horizontal "fall-back" row).
    • Spend so much less time producing the images.
    • Implement a very smooth vertical rotation as you can now have as many "rows" as needed without noticeable loss of performance as it would be the case with the classic rows.

    And last but not least, the hotspot positioning in "3D" is a breeze as now you can simply go through a small set of vertical images to create the 3d hotspot effect.

    We already saw how this mode worked out for a set of 3D product images of a shoe from a user and it worked and looked very nice, so we look forward to seeing more examples from you - please share if you would like them to appear on our new examples page!

    PS: this feature is available upon request and we will release it in the next v3.6.2 release in about 2-3 weeks along with the incremental zoom and a few more goodies.

Subscribe to our newsletter

Sign up to our newsletter to keep a pulse on our latest developments, informative posts and beta releases. We don't abuse it!