News

Add rotating 3D images with jQuery

Inspired by volkswagen-sportscars.fr, rapidly add your own 3D-style rotating product viewer using the excellent Dopeless Rotate

Add-rotating-3D-images-with-jQuery

Add rotating 3D images with jQuery

DOWNLOAD TUTORIAL FILES

Download and attach Dopeless

Get started by visiting bit.ly/1fJXFnQ and downloading the Dopeless Rotate plug-in. The repository is freely available for non-commercial use only so once saved, unpack the zip to find the two ‘css’ and ‘scripts’ folders you’ll need to copy into the root of your HTML page. In the <head> of your page, start by attaching the latest jQuery CDN plus the core dopelessRotate.js and style.css files:

001    <script src=”http://code.jquery.com/
jquery-1.11.0.min.js”></script>
002    <script type=”text/javascript” src=
”scripts/dopelessRotate.js”>
</script>
003    <link rel=”stylesheet” href=”css/
style.css” type=”text/css” media
=”screen”/>

A stack of images

This being a 360-degree product viewer, you need a number of images of identical dimensions showing an object in full rotation. Ideally these would be product photographs or Volkswagen cars, but for our example we’re using 3D text rendered in Photoshop and exported to eight JPEGs. Each 450 x 324 image shows the object at 45-degree increments, so doubling up the quantity would provide a smoother rotation.

Set up the page

With each of the eight JPEGs saved as ‘image01’ through to ‘image08’ and placed in an ‘images’ folder in our root, we can populate the HTML. The main thing you will need to add here is an <img> holding the first image frame, nested inside a <div> element. Give the image a unique ID and set the width/height dimensions inline. The <div> must point to the dopelessrotate CSS class for styling by the plug-in:

001    <div class=”dopelessrotate”>
002        <img id=’rotatingImage’ src=
’images/01.jpg’ width=
’450’ height=’324’>
003    </div>

Call the plug-in

Before the closing <body> tag we add a short <script> calling tsRotate() on our <div> element when the document is ready. Inside this we crucially pass two options for loading our images locally, rather than the plug-in’s server-side PHP support. This involves listing out the paths to each of the required image files, separated by commas like so:

001    <script>
002    $(document).ready(function(){
003        $(‘#rotatingImage’).tsRotate({
004        ‘nophp’:true,
005        ‘nophpimglist’:’images/01.jpg
,images/02.jpg,images/03.jpg
,images/04.jpg,images/05.jpg
,images/06.jpg,images/07.jpg
,images/08.jpg’
007        });
008    });
009    </script>

Extra plug-in options

A superb range of further options are available to tweak the performance of the plug-in, fully documented online. However, to illustrate we’ve added in a select few to turn off the zoom feature (which requires extra images) and the hotspots facility that can be used to add in informative text labels. The ‘reverse’ option inverts the normal rotation direction, while ‘disablelogo’ removes the maker’s mark. ‘Autorotate’, when set to true, will revolve the images automatically based on the supplied speed value.

001    <script>
002    $(document).ready(function(){
003        $(‘#rotatingImage’).tsRotate({
004        ‘zoom’:false,
005        ‘hotspots’:false,
006        ‘reverse’:true,
007        ‘disablelogo’:true,
008        ‘autorotate’:true,
009        ‘autorotatespeed’:50,
010        ‘nophp’:true,
011        ‘nophpimglist’:’images/01.jpg
,images/02.jpg,images/03.jpg
,images/04.jpg,images/05.jpg
,images/06.jpg,images/07.jpg
,images/08.jpg’
012        });
013    });
014    </script>

Save, preview and spin

Add in as many options as you require and set the parameters as desired before saving your page and previewing. The plug-in component should show a pre-loader animation before displaying the first image. If you’ve set it to manually rotate, you simply need to drag the mouse left or right in order to spin through the stack of images in full 360 degrees!

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×