Touch-enabled 360 Degree Product View - 360ImageRotate

Touch-enabled 360 Degree Product View - 360ImageRotate
File Size: 2.34 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.