Touch-enabled 360 Degree Product View - 360ImageRotate

Touch-enabled 360 Degree Product View - 360ImageRotate
File Size: 2.34 KB
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
  • 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,
  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();

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