Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate

File Size: 403 KB
Views Total: 3496
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.