In this article I will explain how to implement 360 degree view image rotator to allow users perform 360 degree view image rotation of Products using jQuery ThreeSixty Plugin.
The jQuery ThreeSixty plugin has three modes of operation
Click – 360 degree image rotation is performed after mouse is clicked on the image and moved.
MouseMove - 360 degree image rotation is performed when mouse is moved over the Image.
Auto - 360 degree image rotation is performed automatically.
HTML Markup
The HTML Markup consists of HTML table containing three Image elements one for each mode of the jQuery ThreeSixty plugin. There’s a hidden DIV consisting of 25 images of different angle of the same product. These images will be used by the plugin to display 360 degree view of the product.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th>
Mouse Click
</th>
<th>
Mouse Move
</th>
<th>
Automatic
</th>
</tr>
<tr>
<td>
<img alt="" src="" id="product1" />
</td>
<td>
<img alt="" src="" id="product2" />
</td>
<td>
<img alt="" src="" id="product3" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/2.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/3.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/4.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/6.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/7.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/8.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/10.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/11.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/12.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/14.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/15.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/16.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/18.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/19.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/20.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/22.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/23.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/24.jpg" />
<img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
</div>
Implementing 360 degree Product Image View using jQuery Plugin
The very first thing is to inherit the JavaScript files jQuery and the 360 degree Product Image plugin. Then inside the jQuery document read event handler, we will apply the plugin to the three product images.
A loop is executed over all the Image elements in the hidden DIV and the source of each image element is loaded into a JavaScript Array.
Then the source of all the three product images is set to the first element in the array and one by one the 360 degree Product Image jQuery plugin is applied to each Product image.
Click mode
This mode has following properties.
method – value must be set to “click”.
sensibility – it is used to adjust rotation speed. You can increase and decrease this value to adjust the rotation speeds.
MouseMove mode
This mode has following properties.
method – value must be set to “mousemove”.
sensibility – it is used to adjust rotation speed. You can increase and decrease this value to adjust the rotation speeds.
Auto mode
This mode has following properties.
method – value must be set to “auto”.
direction – it is used to set the direction of rotation. The values are forward and backward.
Autoscrollspeed – It is to adjust the speed. The lower number gives faster rotation.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/matdumsa/jQuery.threesixty/master/jquery.threesixty.js"></script>
<script type="text/javascript">
$(function () {
//Load the image URLs into an Array.
var arr = new Array();
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
//Set the first image URL as source for the Product.
$("#product1, #product2, #product3").attr("src", arr[0]);
//Click mode.
$("#product1").threesixty({ images: arr,
method: 'click',
sensibility: 1
});
//MouseMove mode.
$("#product2").threesixty({ images: arr,
method: 'mousemove',
sensibility: 1
});
//Automatic mode.
$("#product3").threesixty({ images: arr,
method: 'auto',
direction: 'forward',
autoscrollspeed: 100
});
});
</script>
Screenshot
Browser Compatibility
The
above code has been tested in the following browsers.
* All
browser logos displayed above are property of their respective owners.
Demo
Downloads