360-degree Product Image Viewer - jQuery rotate360.js

rotate360.js is a jQuery based 3D image viewer that makes use of jQuery UI slider widget to provide a 360-degree viewing experience for your product images.

Click the Play button to auto play the product image viewer. You can also manually view different angles of the product image by dragging the slider control.

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• Interactive 360º Product Viewer Plugin With JQuery - Angle View
• Simple jQuery 360-degree Product Image Viewer - ThreeSixtyRotate
• 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. Include the needed jQuery library and jQuery UI framework on the web page.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Include the JavaScript jquery.rotate360.js and Stylesheet rotate360.css.

<link rel="stylesheet" href="css/rotate360.css">
<script src="js/jquery.rotate360.js"></script>

3. Build the HTML structure for the product viewer.

<div id="main_image_container" class="main_image_container">
  <img id="bg_smooth" src=""> 
  <span id="progress_bar"></span>
  <div class="controls">
    <div id="slider" class="slider"></div>
    <button class="play_btn"></button> 
    <button class="pause_btn"></button>
  </div>
</div>

4. Place your product images in the image folder.

A_360_01.jpg
A_360_02.jpg
A_360_03.jpg
...

5. Initialize the 360-degree Product Image Viewer by calling the function on the top container.

$(document).ready(function() {
  $("#main_image_container").rotate360();
});

---

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