Super Tiny jQuery 360 Degrees Product Image Viewer

A super lightweight (just 27 lines of javascript codes, <1kb unminified.) and easy to use jQuery plugin that allows you to rotate a product image 360 degrees by mouse moving.

Fork on Github

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• jQuery Plugin For 360 Degree 3D Panoramic View - 3dEye.js
• jQuery Plugin For Draggable 360s Image Sequences - threesixtyjs
• AJAX-ZOOM - 3D Spin Rotate & Zoom 360 Plugin
• jQuery Plugin For Draggable 360 Degrees Product Image View - j360

Basic Usage:

1. Insert a group of product images that are in different angles.

<ul class="list">
<li><img src="images/image1_1.jpg" /></li>
<li><img src="images/image1_2.jpg" /></li>
<li><img src="images/image1_3.jpg" /></li>
<li><img src="images/image1_4.jpg" /></li>
<li><img src="images/image1_5.jpg" /></li>
<li><img src="images/image1_6.jpg" /></li>
<li><img src="images/image1_7.jpg" /></li>
<li><img src="images/image1_8.jpg" /></li>
<li><img src="images/image1_9.jpg" /></li>
<li><img src="images/image1_10.jpg" /></li>
<li><img src="images/image1_11.jpg" /></li>
<li><img src="images/image1_12.jpg" /></li>
<li><img src="images/image1_13.jpg" /></li>
<li><img src="images/image1_14.jpg" /></li>
<li><img src="images/image1_15.jpg" /></li>
<li><img src="images/image1_16.jpg" /></li>
<li><img src="images/image1_17.jpg" /></li>
<li><img src="images/image1_18.jpg" /></li>
</ul>

2. Load the jQuery javascript library at the bottom of your web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

3. The javascript.

$(function(){
	var pic_X=$('.list').offset().left;
	var pic_Y=$('.list').offset().top;
	var pic_W=$('.list').width()/2;
	var pic_H=$('.list').height()/2;
	var center_X=pic_X+pic_W;
	var center_Y=pic_Y+pic_H;
	var movestop=pic_W/10;
	$('.list').mousemove(function(event){
		var mouse_X=event.pageX;
		var mouse_Y=event.pageY;
		if(mouse_X-center_X<=0){
			moveImg(mouse_X,mouse_Y,'left')
		}else{
			moveImg(mouse_X,mouse_Y)
		}
	});
	function moveImg(m_X,m_Y,dir){
		var index=Math.ceil(Math.abs(m_X-center_X)/movestop);
		if(dir){
			$('.list li').eq(index).show().siblings().hide();
		}else{
			$('.list li').eq(18-index).show().siblings().hide();
		}
	}
})

---

This awesome jQuery plugin is developed by mumu. For more Advanced Usages, please check the demo page or visit the official website.