Interactive 360º Product Viewer Plugin With JQuery - Angle View

Angle View is a jQuery based 360º image viewer used to rotate through a list of product images that change at different angles with mouse move or drag.

See also:

• Cyclotron - 360°Panorama Image Display Plugin
• 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. Add jQuery JavaScript library and the jQuery Angle View plugin's files into your html page.

<link rel="stylesheet" href="angle.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.angle.js"></script>

2. Add a sequence of product images at different angles into the image viewer.

<div class="angle-view" id="angle-view-demo">
  <ul>
    <li><img src="1.jpg" alt="01" /></li>
    <li><img src="2.jpg" alt="02" /></li>
    <li><img src="3.jpg" alt="03" /></li>
    <li><img src="4.jpg" alt="04" /></li>
    ...
  </ul>
</div>

3. The CSS to style the image viewer.

.angle-view {
  overflow: hidden;
  width: 600px;
  margin: 10px auto;
  border: 5px solid #CECECE;
}

.angle-view ul, #angle-view li {
  margin: 0;
  padding: 0;
}

.angle-view li { list-style: none; }

.angle-view ul {
  width: 600px;
  height: 330px;
}

.angle-view img {
  width: 90%;
  display: block;
  margin: 18px auto;
}

4. Call the function to active the image viewer.

$('#angle-view-demo').angle();

5. Options and defaults.

$('#angle-view-demo').angle({

  // rotation speed
  speed: 2,

  // enable mouse drag
  drag: false,

  // selector for previous button
  previous: '',

  // selector for next button
  next: '',

  // current image
  current: 0,

  // js array object
  get_image: function() {},

  // callback
  after: function() {}
  
});

Changelog:

2021-01-22

• JS updated

---

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