360º Product View In JavaScript – js-cloudimage-360-view

Category: Image , Javascript , Recommended | September 3, 2020
Author: scaleflex
Views Total: 3,215 views
Official Page: Go to website
Last Update: September 3, 2020
License: MIT


360º Product View In JavaScript – js-cloudimage-360-view


A vanilla JavaScript image viewer library which brings a great 360º viewing experience to your products.

Fully responsive and works with the Cloudimage service.

How to use it:

Import the js-cloudimage-360-view library into the document.

<script src="/path/to/version.min.js"></script>

To enable image lazy load, load a 3rd lazy load library (e.g. lazysizes, yall.js, lozad.js) in the document.

<script src="/path/to/lazysizes.min.js"></script>
<script src="/path/to/yall.min.js"></script>
<script src="/path/to/lozad.min.js"></script>

Add the CSS class cloudimage-360 to the container in which you want to place the image viewer.

<div class="cloudimage-360"></div>

Specify the path to the image folder.

<div class="cloudimage-360"

Specify the file name and number of product images.

<div class="cloudimage-360"

More HTML data attributes to customize the image viewer.

  • data-keys: True or false(default). Enable keyboard interactions.
  • data-autoplay or data-autoplay-reverse: True or false(default). Enable autoplay.
  • data-full-screen: True or false(default). Enable fullscreen mode.
  • data-magnifier: Number. Zoom level. Default: none.
  • data-ratio: Number. Can be use to prevent page jumping. Default: none.
  • data-speed: Number. Spin animation speed. Default: 150.
  • data-drag-speed: Speed Factor of changing frames on drag event.
  • data-spin-reverse: Spin direction.
  • data-stop-at-edges: Blocks repeating images after reaching last image. Default: false.
  • data-control-reverse: Spin direction using controls
  • data-box-shadow: String. Box shadow styles. Default: none.
  • data-hide-360-logo: Hide the 360 logo or not. Default: false.
  • data-logo-src: Path to logo image.
  • data-bottom-circle: True or false(default). Display 360 view line at the bottom of container.
  • data-bottom-circle-offset: Number. Bottom offset. Default: 5.
  • data-lazyload: True or false(default). Enable lazy load. Requires 3rd lazy load library like lazysizes, yall.js, lozad.js
  • data-lazyload-selector: String. Helper class for lazy load.
  • data-index-zero-base: Left zero padding on filename.
  • data-image-list: Add a list of images instead of folder & filename.

API methods.



v2.6.0 (09/03/2019)

  • add ability to specify custom 360 view logo

v2.5.0 (08/05/2019)

  • added possibility to hide 360 view icon

v2.4.1 (07/16/2019)

  • fixed problem with first preview image is random

v2.4.1 (07/16/2019)

  • initialize first image using data-image-list

v2.1.0 (07/16/2019)

  • new methods: init, destroy;
  • new initialization params: notInitOnLoad;
  • new config params: control-reverse, stop-at-edges;
  • possibility to add controls


  • v2.0.7

You Might Be Interested In:

One thought on “360º Product View In JavaScript – js-cloudimage-360-view

  1. Tom

    It’s very neat but has a bug: when holding the mouse button and moving out of the canvas it keeps rotating. 2nd: would be cool if you added easing/animation like on a mobile: when dragging and releasing the button it would keep rotating and will slowly stop.


Leave a Reply