Interactive 360º Product Viewer Plugin With JQuery - Angle View

Interactive 360º Product Viewer Plugin With JQuery - Angle View
File Size: 328 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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() {}
  
});

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