Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate

ThreeSixtyRotate is a jQuery based product viewer that allows to automatically or manually rotate a sequence of images at different angles.

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• 360 Degrees Image Rotate & Zoom Plugin with jQuery and Canvas - Tikslus360
• Simple 360 Degrees Image Viewer Plugin For jQuery - Rotateimage
• 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
• Super Tiny jQuery 360 Degrees Product Image Viewer

How to use it:

1. Prepare a sequence of product images in the same extension. For example: 1.png, 2.png, 3.png and so on.

2. Include the jQuery ThreeSixtyRotate plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.360rotate.js"></script>

3. Create an empty container for the image viewer.

<div class="demo">
  <p class="load">Now Loading...</p>
</div>

4. The required CSS styles.

.demo {
  position: relative;
  width: 480px;
  height: 270px;
}

.demo li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

.load {
  line-height: 270px;
  text-align: center;
}

5. Call the plugin on the container element you just created.

$(function(){
ThreeSixtyRotate('.demo',{
imgPath: 'img/', // Path to your product images.
imgEx: 'png', // All images must have this file extension
zeroPadding: 0, // Zero Padding (ex:1->0、01->1、001->2)
imgFirstNum: 1,
totalFrame: 23,
startFrame: 1,
clockwise: false, // false = counterclockwise
rotateSpeed: 1,
inertia: true,
autoRotate: false, // auto rotation
frameRate: 24,
overStop: true, // Pause on hover when autoRotate is true.
preload: true,
showDuration: 300
});
});

Change log:

2014-09-06

• fixed bugs.

2014-09-05

• fixed bugs.

2014-08-18

• fix for IE8

---

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