360-degree Product Image Viewer - jQuery rotate360.js

360-degree Product Image Viewer - jQuery rotate360.js
File Size: 2.81 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.