360 Degree Product Viewer – Axigear 360 Viewer

Preview:

Description:

A feature-rich, user-friendly, and touch-friendly 360-degree product viewer that enables the visitors to see the details of your products from any angle.

Features:

• Spin product with mouse drag or touch swipe events.
• Autoplay just like a video.
• Allows to enlarge the product in a fullscreen lightbox.
• Magnifying glass effect on your product image.
• Simple to use yet highly customizable.

How to use it:

1. Download the package and insert the axigear-360-viewer.min.js into the document.

<script src="build/axigear-360-viewer.min.js"></script>

2. Prepare product images from different angles.

3. Create a container with the CSS class of ‘axigear-360’ and config the product viewer with the following attributes:

• folder: image folder
• filename: file name
• index-zero-base: zero-based numbering
• amount: number of images
• rotate-icon: shows spin icon
• magnifier: zoom level
• full-screen: shows fullscreen (lightbox) icon
• play-icon: shows autoplay icon
• auto-loading: auto load all images
• auto-play: autoplay
• autoplay-reverse: reverse autoplay
• speed: spin speed
• drag-speed: drag speed
• spin-reverse: reverse spin
• control-reverse: reverses direction when using controls
• keys: enables keyboard interactions
• ratio: aspect ratio
• box-shadow: CSS box-shadow property
• stop-at-edges: prevents duplicate image when reaching the last one

<div class="axigear-360"
  data-folder="./assets/img/boot/"
  data-filename="IMG_{index}.jpg"
  data-index-zero-base="2"
  data-amount="36"
  rotate-icon
  data-magnifier="3"
  full-screen
  play-icon
></div>

4. Customize the icons with the following attributes:

• play-icon-url
• magnifier-icon-url
• full-screen-icon-url
• close-full-screen-icon-url
• rotate-icon-url
• image-360-icon-url
• image-360-icon-background-color