In this article I will explain with an example, how to implement 360 degree Product Image View using jQuery ThreeSixty plugin.
jQuery ThreeSixty plugin allow users perform 360 degree view image rotation of Products.
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.
Download jQuery ThreeSixty Plugin
You will need to download the plugin files from the following location.
HTML Markup
The HTML Markup consists of an HTML Table containing three Image elements, a hidden DIV consisting of some images of different angle of the same product.
These images will be used by the jQuery ThreeSixty 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="https://www.mathieusavard.info/threesixty/1.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/2.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/3.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/4.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/5.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/6.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/7.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/8.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/9.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/10.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/11.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/12.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/13.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/14.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/15.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/16.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/17.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/18.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/19.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/20.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/21.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/22.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/23.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/24.jpg" />
<img alt="" src="https://www.mathieusavard.info/threesixty/25.jpg" />
</div>
Implementing 360 degree Product Image View using jQuery ThreeSixty Plugin
Inside the HTML Markup, first the following JS scripts are inherited.
1. jquery.min.js
2. jquery.threesixty.js
Inside the jQuery document ready event handler, a loop is executed over all the Image elements in the 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 jQuery ThreeSixty plugin is applied to each Product images in the Table.
The jQuery ThreeSixty plugin has following modes of operation:.
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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://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
![360 Degree Image Rotator: Implement 360 degree Product Image View using jQuery Plugin]()
Demo
Downloads
