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

Category: Image , Javascript , Recommended | September 26, 2023
Author:scaleflex
Views Total:44 views
Official Page:Go to website
Last Update:September 26, 2023
License:MIT

Preview:

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

Description:

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

Fully responsive and works with the Cloudimage service.

How to use it:

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

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

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

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

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

4. Specify the path to the image folder.

<div class="cloudimage-360"
     data-folder="./product/">
</div>

5. Specify the file name and number of product images.

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

6. More HTML data attributes to customize the image viewer.

  • data-keys: True or false(default). Enable keyboard interactions.
  • data-keys-reverse: Invert arrow keys on keyboard
  • data-filename-x: The filename pattern for x-orientation images
  • data-filename-y: The filename pattern for y-orientation images
  • data-autoplay or data-autoplay-reverse: True or false(default). Enable autoplay.
  • data-play-once: stops the autoplay after one complete cycle.
  • data-autoplay-behavior: spin-x, spin-y, spin-xy, spin-yx
  • data-fullscreen: True or false(default). Enable fullscreen mode.
  • data-magnifier: Number. Zoom level. Default: none.
  • data-width: Width for the container
  • data-height: Height for the container
  • data-speed: Number. Spin animation speed. Default: 150.
  • data-drag-speed: Speed Factor of changing frames on drag event.
  • data-disable-drag: Disable mouse drag.
  • 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-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-x: Add list of images in x-oriantation instead of folder , filename-x & amount-x.
  • data-image-list-y: Add list of images in y-oriantation instead of folder , filename-y & amount-y.
  • data-pointer-zoom: Pointer zoom scale.
  • data-request-responsive-images: enable/disable the request of a new image on resize

7. API methods.

window.CI360.destroy();
window.CI360.init();
window.CI360.add(idOftheView: string);
window.CI360.update(idOftheView, forceUpdate);
window.CI360.getActiveIndexByID('id_of_product', oriantation = 'x');
window.CI360.addHotspots(idOftheView, hotspotsConfig);

Changelog:

v3.2.0 (09/26/2023)

  • Added possibility to add hotspots dynamically

v3.1.1 (04/19/2023)

  • Remove CVE vulnerabilities

v3.1.0 (04/10/2023)

  • Added possibility to enable/disable the request of a new image on resize using data-request-responsive-images
  • Fixed Page scroll in y-axis

v3.0.4 (10/19/2022)

  • Fixed: Hotspots icons width

v3.0.3 (05/04/2022)

  • Fixed: Error on loading original images from image list

v3.0.0 (03/24/2022)

  • Added possibility to add makers or hotspots to each image
  • Added possibility add views after init the plugin
  • Added possibility to update views
  • Fixed: hide 360 logos after play once

v2.7.12 (03/19/2022)

  • Changed hotspots init method

v2.7.11 (03/17/2022)

  • fixed bugs

v2.7.10 (03/02/2022)

  • fixed image quality in fullscreen
  • fixed resized image loading

v2.7.9 (02/27/2022)

  • Added possibility to add new view to CI360 views
  • Fixed re-render method

v2.7.7 (02/24/2022)

  • Bugfixed

v2.7.6 (02/20/2022)

  • Fixed drag speed
  • Fixed responsive canvas width and height

v2.7.5 (02/08/2022)

  • Added update method to re-render or re-init the plugin
  • Bugfix

v2.7.3/4 (01/27/2022)

  • Bugfix

v2.7.2 (01/26/2022)

  • Added possibility to fit container relative to its width or height and maintain the aspect ratio
  • Added possibility to reverse the directions of the keys on the keyboard
  • Fixed pointer zoom behavior
  • Fixed error while loading images from lists
  • Fixed get the active image index

v2.7.1 (11/06/2021)

  • Added: click to reset mouse zoom
  • Added: show 360 logo after play once
  • Fixed: set click as default value to start zoom
  • Fixed: Sass error
  • Change: dpointer zoom behavior

v2.7.0 (11/04/2021)

  • Added play once then stops auto-play
  • Added spin in y-direction
  • Added zoom with mouse wheel
  • Added zoom with fingers on mobile
  • Added possibilty to change icons styles
  • Bugfix

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

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