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

Category: Image , Javascript , Recommended | May 24, 2019
Author: scaleflex
Views Total: 359
Official Page: Go to website
Last Update: May 24, 2019
License: MIT

Preview:

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

Description:

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"
     data-folder="./product/">
</div>

Specify the file name and number of product images.

<div class="cloudimage-360"
     data-folder="./product/"
     data-filename="product-{index}.jpeg"
     data-amount="60">
</div>

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-box-shadow: String. Box shadow styles. Default: none.
  • 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.
  • data-lazyload-selector: String. Helper class for lazy load.

Changelog:

05/24/2019

  • 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.

    Reply

Leave a Reply