Touch-enabled 360 Degree Product View - 360ImageRotate

360ImageRotate is a responsive, mobile-friendly image viewer/rotator plugin that engages your visitors with a 360-degree viewing experience with your products.

More features:

• Auto spin.
• Fullscreen mode.
• Navigation arrows.
• Image loading spinner.
• Supports touch events.

How to use it:

1. Put a set of product images at different angles in a folder. Default: 'images'.

2. Load the necessary JavaScript and CSS files in the HTML file.

<link rel="stylesheet" href="styles.css" />
<script src="jquery.min.js"></script>
<script src="360ImageRotate.min.js"></script>

3. Create a placeholder element for the 360 product viewer.

<div class="threesixty-image-rotate example">
</div>

4. Initialize the plugin and specify the image extension & total number of product images. That's it.

$('.example').TreeSixtyImageRotate({
  totalFrames: 36,
  extension: ".png"
}).initTreeSixty();

5. Full plugin options to customize the 360 product view.

• totalFrames: total number of images you have
• endFrame: end frame for the auto spin animation
• currentFrame: This the start frame for auto spin
• speed: Animation Speed
• dragSpeed: Speed of rotation when dragging elements
• progress: selector to show the loading progress
• extension: extension for the images
• imgPrefix: image prefix
• navigation: display navigation
• spinner: disable spinner for loading
• imagesFolder: path to folder with images
• smallWidth: smaller width for images
• smallHeight: smaller height for images
• largeWidth: larger width for images
• largeHeight: larger height for images
• imagePlaceholderClass: class for images placeholder
• imgList: selector for image list

$('.example').TreeSixtyImageRotate({
  // These are defaults.
  totalFrames: 36,
  endFrame: 36,
  currentFrame: 0,
  speed: 50,
  dragSpeed: 6
  progress: ".spinner",
  extension: ".jpg", 
  imgPrefix: "",
  navigation: true,
  spinner: true, 
  imagesFolder: "images/",
  smallWidth: 400,
  smallHeight: 400,
  largeWidth: 800, 
  largeHeight: 800,
  imagePlaceholderClass: "images-placeholder",
  imgList: "threesixty-images-rotate"
}).initTreeSixty();

Changelog:

2020-01-15

• Implemented settings for dragSpeed in order to control Sensitivity

---

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