How to Create 360 Degree Rotating Images for the Web.

Rotating or 360 degree images are a great way of showing off your product. This technique offers a compelling way of displaying the product to your potential client, looking slick and professional when compared to a standard flat product image. They look great but they also look complicated. Actually though, it is a deceptively simple technique to show rotating 360 degree views with back and forward control by the viewer. Here we explain one simple technique so you might be able to make use of rotating products too.

How Can You Achieve That 360 Degree Rotating Product Functionality?

There are two aspects to creating a rotating product on your website. First you need the imagery then you need to have some simple HTML and javascript code to display the product on your customer’s screen. So we’ll split this article in to two parts. Images and web.

Part One: The images.
1.1. If you take a look at the rotating product example we have here, what makes it all work is 37 single images, one for each view of the item. The first task is to create those 37 product shots. For that additional slick look, make the background all-white, that's RGB 255,255,255.

1.2. Set up a turntable and mark up each stopping point, one for each image you require. Our example needed 37 stops.

1.3. Ensure your turntable is topped out in white.

1.4. The lighting must be consistant across each image to maintain a seamless transition as the product rotates.

1.5. Edit your images to ensure they have a crisp white background, are sharp and contrasty. You may also have to remove any nasty marks in the white background.

1.6. Reduce all of the product images down to a web friendly size. Our example images are 300px by 200px and at 72dpi. The arrows are 200px high and 50px wide with that pure white background. Remember the smaller the image the quicker they will load in the viewer's browser.

1.7. Create your left and right arrow images. These are jpg's and the same px height as the rotating image. You can use most picture editors to create arrows. Ensure they have a background colour that matches your web page design.

Part Two: The web.
Note for this to be available on the web you have to have a web site that hosts your web page files and images. You can of course make this work on your own pc as a web browser will display html files from your hard drive just as easily.

2.1. Next you create a javascript script which manages the loading of the images as the web page loads and it also manages the display of the rotated image when the viewer clicks the back or forwards arrow. If you take a look at the source code for this page, you can see the script at the end of the 'head' section.

2.2. A little html code using the old favourite table tag to display the left and right arrows and the holder for the image.

2.3. Within the tag you will include the following commands:
onmouseover - to call a javascript function to change the colour of the arrow
onmouseout - to call a javascript function to change the colour of the arrow back when they viewer takes their mouse off.
Onclick - When the viewer clicks on an arrow this calls a function to change the displayed image of your rotating product back or forwards depending on which arrow was clicked.

2.4. Load the images from point 1.6 above to your web host along with your four left and right arrows.

For our simple example thats all there is to it. It's easily achieved by a coder with HTML experience. If you wanted to offer this facility for many products you would require a database system working behind the scenes managing the multple images for each product. This too is quite simple but does require knowledge of database software such as MySQL, Perl or other web programming and management systems.

Further Reading.

Comments Guidelines

Home Legal Privacy

© 2015-2016 Peter Hatter Photography Ltd. All rights reserved.