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

Preview:

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