360 Degree Product Viewer – Axigear 360 Viewer

Category: Image , Javascript , Recommended | August 4, 2020
Author: axigear
Views Total: 234 views
Official Page: Go to website
Last Update: August 4, 2020
License: MIT

Preview:

360 Degree Product Viewer – Axigear 360 Viewer

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

You Might Be Interested In:


Leave a Reply