Author: | scaleflex |
---|---|
Views Total: | 44 views |
Official Page: | Go to website |
Last Update: | September 26, 2023 |
License: | MIT |
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
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.