Full 360-Degree Product Image Rotation in JavaScript

Product imagery and video are extremely important aspects of on-site merchandising that can have a significant impact on an online retailer’s success. And, to a great degree, web developers have a responsibility to their clients to help include sales-boosting images and image effects whenever possible.

In this post, I am going to introduce you to Petr Vostřel’s jQuery plugin, Reel, which allows you to create 360-degree rotating images with just CSS and JavaScript.

The Photography

Regardless of the technique used, creating a 360-degree product image requires some photography. For this article, I took 36 pictures of a metal water bottle. I did not take a lot of time to set up the shot or ensure that my water bottle never moved in relation to the camera.

In a production environment, a lot of time and care should be taken with the product images since they will ultimately determine the quality of the rotation effect.

With 36 images ready, I need to create a large (think monster) composite image. And remember the order of the images in your composite matters. Start assembling the composite image in the upper left corner. Make it six columns wide. Start the second row on the left and continue until the composite is complete. You can reconfigure Reel for a different number of images and for a different composite organization.

You’ll also need the first frame of the series as an image. And I want to reiterate that the photography is the really hard part. It can take a couple of hours to prepare one really functional composite unless you are using batch processing.

By default, I should append “-reel” to the name of the original image when naming the composite image. So, if the first image is “product.jpg,” the composite image should be “product-reel.jpg.” Both images should be saved in the same folder.

Dependencies

To get the most out of Reel, you’re going to need several JavaScript files, including jQuery 1.4.x, jQuery.DisableTextSelect, jQuery-Mousewheel, and, of course, Reel.

I also created one additional JavaScript file to hold the single line of code needed to fire up Reel.

$('#image360').reel({ frames: 36, saves: false, klass: 'spinner' });

This jQuery-flavored snippet of JavaScript uses three of Reel’s options: “frames,” which tells Reel how many frames are in the composite image; “saves,” which will allow the user to copy and save the product image; and “klass,” which adds a CSS class to the image so that I can add additional style descriptions. Reel will wipe out most CSS descriptions applied to the image in any way other than the “klass” specification.

The Reel Mark-up

Reel is very flexible in terms of mark-up, meaning that you can do a lot of customization.

<!doctype html>
<html lang="en">
<head>
<title>REEL DEMONSTRATION on Ecommerce Developer</title>
<link type="text/css" rel="stylesheet" href="style.css"></head>
<body>

<div id="wrapper">
<h1>Some Fancy Product</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit adipiscing risus. Vestibulum gravida blandit rutrum. Etiam faucibus posuere pulvinar. Vivamus condimentum semper mi, mollis molestie magna hendrerit id. Mauris velit arcu, fermentum in porta nec, suscipit in sapien. Integer vel adipiscing enim. Praesent et turpis erat, aliquet ornare augue. Pellentesque feugiat quam in nisi posuere nec viverra nulla venenatis. Aenean pulvinar metus rutrum urna rhoncus consectetur. Ut tortor magna, vestibulum quis ultricies et, dapibus. </p>

<div><img id='image360' src='img/bottle.jpg' width="600px" height="400px"/> </div>

<h4>Add to cart</h4>
<h5>Use Your Mouse for a 360-Degree View</h5>

</div><!--end wrapper-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script src="jquery.reel-min.js"></script>
 <script src="inc/jquery.disabletextselect-min.js"></script>
 <script src="inc/jquery.mousewheel-min.js"></script> 
<script src="js.js"></script>

</body>
</html>

Next, I added the following CSS.

body {background: #5B5A5C;}
#wrapper {width: 900px; height: 600px; margin: 50px auto; padding: 20px; background: #fff; border:#000 solid 1px;}
#wrapper h1 {text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 3em; color:#3E3D40;}
#wrapper h4 {position: relative; top: -80px; left: 660px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 1.5em; color:#3E3D40;}
#wrapper h5 {position: relative; top: -60px; left: 150px; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: .75em; color:#3E3D40;}
#wrapper p {width: 250px; float: right; margin-top: 0;}
.spinner {border:#3E3D40 solid 5px;}

A Bit of Troubleshooting

I ran in to two problems working with Reel that you might want to watch out for. First, it stopped working when I floated the image element. And you really do need to be very careful with your composite image as there is not even room of a single pixel of error.

Full 360-Degree Product Image Rotation in JavaScript

August 21, 2010 • Armando Roggio

The Photography

Dependencies

The Reel Mark-up

A Bit of Troubleshooting