# mmc-js-cloudimage-360-view > [![Release](https://img.shields.io/badge/release-v2.7.1-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing) [![License](https://i Latest version **1.1.2** (published 2021-12-16) · MIT license · 0 weekly downloads ## Install ```sh npm install mmc-js-cloudimage-360-view pnpm add mmc-js-cloudimage-360-view yarn add mmc-js-cloudimage-360-view bun add mmc-js-cloudimage-360-view ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.2 | | Published | 2021-12-16 | | First published | 2021-12-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 96.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | mmcagentur, scaleflex | | Maintainers | mmi-mmcagentur-at | | Keywords | image, images, cloudimage, 360, photo, product, view, viewer, 360 product view | ## Links - npm: https://www.npmjs.com/package/mmc-js-cloudimage-360-view - Repository: https://github.com/mmi-mmcagentur-at/js-cloudimage-360-view - Homepage: http://#readme - Issues: https://github.com/mmi-mmcagentur-at/js-cloudimage-360-view/issues - npm.io page: https://npm.io/package/mmc-js-cloudimage-360-view ## Dependencies (1) - [core-js](https://npm.io/package/core-js.md) ^3.0.0 ## Alternatives - [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads - [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads - [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads - [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads - [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads ## Recent versions - 1.1.2 (latest) — 2021-12-16 - 1.1.1 — 2021-12-16 - 1.1.0 — 2021-12-15 - 1.0.3 — 2021-12-15 - 1.0.2 — 2021-12-15 - 1.0.1 — 2021-12-15 - 1.0.0 — 2021-12-15 ## README [![Release](https://img.shields.io/badge/release-v2.7.1-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)

JS Cloudimage 360 View

Docs • Demo • Code Sandbox • Video Tutorial • Why

A simple, interactive resource that can be used to provide a virtual tour of your product.

The Lounge

powered by [Cloudimage](https://www.cloudimage.io/) ([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k)) ## Table of contents * [Demo](#demo) * [Step 1: Installation](#installation) * [Step 2: Initialize](#initialize) * [Methods](#methods) * [Customize Icons](#customize-icons) * [Configuration](#configuration) * [Controls](#controls) * [Cloudimage responsive integration](#cloudimage-responsive-integration) * [Lazy loading integration](#lazy-loading) * [Best practices](#best-practices) * [Browser support](#browser_support) * [Filerobot UI Family](#ui_family) * [Contributing](#contributing) * [License](#license) ## Demo To see the Cloudimage 360 view plugin in action, please check out the [Demo page](https://scaleflex.github.io/js-cloudimage-360-view/). ## Step 1: Installation Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag ```javascript ``` ## Step 2: Initialize After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**, **server folder path**, **file name** and amount of images: ```html

```

## Methods ### init ###### Type: **Function** Initialization of js cloudimage 360 view plugin. ```javascript window.CI360.init(); ``` > NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with **notInitOnLoad** param > ```javascript > > > > ``` ### destroy ###### Type: **Function** Destroying a cloudimage 360 viewer instance will reset the HTML to its original state. ```javascript window.CI360.destroy(); ```

### getActiveIndexByID ###### Type: **Function** Get the {index} of the image that is being viewed. ```javascript window.CI360.getActiveIndexByID('id_of_product'); ``` ## Customize icons You can customize the icons by adding the following classes: ### Example CSS ```css .cloudimage-360 .fullscreen-icon { background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg) 50% 50% / cover no-repeat; } .cloudimage-360 .magnify-icon { background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat; } .cloudimage-360 .close-fullscreen-icon { background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat; } .cloudimage-360 .reset-zoom-icon { background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986) 50% 50% / cover no-repeat; } ``` ## Config ### class ###### Type: **String** | Value: **"cloudimage-360"** | _required_ The selector for js-cloudimage-360-view lib. ### data-folder (or folder) ###### Type: **String(url)** | _required_ Your images folder on server. ### data-api-version (or api-version) ###### Type: **String** |Default: **'v7'** | _optional_ Allow to use a specific version of API. - set a specific version of API ```javascript data-api-version="v7" ``` - disable API version ```javascript data-api-version="null" ``` ### data-filename (or filename) ###### Type: **String** | Default: **image-{index}.jpg** | _optional_ The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and [data-amount](#data-amount). ### data-filename-y (or filename-y) ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_ The filename pattern for Y-axis images. Must include {index}, which the library will replace with a number between 1 and [data-amount-y](#data-amount-y). ### data-amount (or amount) ###### Type: **Number** | Default: **36** | _optional_ Amount of images to load for 360 view. ### data-amount-y (or amount-y) ###### Type: **Number** | Default: **0** | _optional_ Amount of images to load in Y-axis for 360 view. ### data-keys (or keys) ###### Type: **Bool** | Default: **false** | _optional_ Support for 360 spin by pressing arrow keys on keyboard. ### data-autoplay (or autoplay) ###### Type: **Bool** | Default: **false** | _optional_ Autoplay 360 spin view on load. ### data-play-once (or autoplay) ###### Type: **Bool** | Default: **false** | _optional_ stops the autoplay after one complete cycle. ### data-autoplay-behavior (or autoplay-behavior) ###### Type: **String** | Default: **spin-x** | _optional_ Changing autoplay behavior Available behaviors (spin-x, spin-y, spin-xy, spin-yx) ### data-full-screen (or full-screen) ###### Type: **Bool** | Default: **false** | _optional_ Open 360 spin view in full screen modal. ### data-magnifier (or magnifier) ###### Type: **Number** | Default: **none** | _optional_ Magnifier to zoom image. ### data-magnifier-in-fullscreen (or magnifier-in-fullscreen) ###### Type: **bool** | Default: **false** | _optional_ enable magnifier in fullscreen modal. ### data-ratio (or ratio) ###### Type: **Number** (height / width) | Default: **none** | _optional_ Prevents page from jumping. ### data-autoplay-reverse (or autoplay-reverse) ###### Type: **Bool** | Default: **false** | _optional_ Autoplay 360 spin view on load. ### data-disable-drag (or disable-drag) ###### Type: **bool** | Default: **false** | _optional_ disable mouse drag. ### data-speed (or speed) ###### Type: **Number** | Default: **150** | _optional_ Speed of changing frames for autoplay in milliseconds. ### data-drag-speed (or drag-speed) ###### Type: **Number** | Default: **150** | _optional_ Speed Factor of changing frames on drag event. ### data-spin-reverse (or spin-reverse) ###### Type: **Bool** | Default: **false** | _optional_ Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount). ### data-box-shadow (or box-shadow) ###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_ Apply box shadow for container. ### data-bottom-circle (or bottom-circle) ###### Type: **Bool** | Default: **false** | _optional_ Display 360 view line at the bottom of container. ### data-hide-360-logo (or hide-360-logo) ###### Type: **Bool** | Default: **false** | _optional_ Hide 360 view icon. ### data-logo-src (or logo-src) ###### Type: **String** | Default: **https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg** | _optional_ URL of asset to use as the 360 view icon. ### data-control-reverse (or control-reverse) ###### Type: **Bool** | Default: **false** | _optional_ Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount). ### data-stop-at-edges (or stop-at-edges) ###### Type: **Bool** | Default: **false** | _optional_ Blocks repeating images after reaching last image (or first image in opposite direction) ### data-bottom-circle-offset (or bottom-circle-offset) ###### Type: **Number** | Default: **5** | _optional_ Bottom offset for 360 view line. ### data-index-zero-base (or index-zero-base) ###### Type: **Number** | _optional_ Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004" ### data-image-list (or image-list) ###### Type: **Array** | _optional_ Option to add list of images instead of `folder` & `filename`. example: ```javascript data-folder="https://scaleflex.airstore.io/demo/360-car/" data-image-list='[ "iris-1.jpeg", "iris-4.jpeg", "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg", "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg" ]’ ``` ### data-lazyload (or lazyload) ###### Type: **Bool** | Default: **false** | _optional_ Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see [Lazy loading](#lazy-loading) ### data-disable-pointer-zoom (or disable-pointer-zoom) ###### Type: **bool** | Default: **false** | _optional_ Disable pointer zoom on desktop ### data-disable-pinch-zoom (or disable-pinch-zoom) ###### Type: **bool** | Default: **false** | _optional_ Disable pinch zoom on mobile ### data-to-start-pointer-zoom (or to-start-pointer-zoom) ###### Type: **string** | Default: **click** | _optional_ Events to start pointer zoom Available events (scroll, click) ### data-on-mouse-leave (or on-mouse-leave) ###### Type: **string** | Default: **none** | _optional_ Functions called after mouse leave the container Available functions (resetZoom) Multiple functions can be applied, separated by "," (comma) ### data-pointer-zoom-factor (or pointer-zoom-factor) ###### Type: **Number** | Default: **2** | _optional_ Pointer zoom scaling factor ### data-pinch-zoom-factor (or pinch-zoom-factor) ###### Type: **Number** | Default: **2** | _optional_ Pinch zoom scaling factor ### data-max-scale (or max-scale) ###### Type: **Number** | Default: **none** | _optional_ Maximum scale that images can be resize to it with pointer or pinch zoom ### data-lazyload-selector (or lazyload-selector) ###### Type: **String** | Default: **lazyload** | _optional_ Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading) ## Controls You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**, **cloudimage-360-top**, **cloudimage-360-bottom** ### Example CSS ```css .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next { padding: 8px; background: rgba(255, 255, 255, 0.5); border: none; border-radius: 4px; } .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus { outline: none; } .cloudimage-360 .cloudimage-360-prev { display: none; position: absolute; z-index: 100; top: calc(50% - 15px); left: 20px; } .cloudimage-360 .cloudimage-360-next { display: none; position: absolute; z-index: 100; top: calc(50% - 15px); right: 20px; } .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before { content: ''; display: block; width: 30px; height: 30px; background: 50% 50% / cover no-repeat; } .cloudimage-360 .cloudimage-360-prev:before { background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg'); } .cloudimage-360 .cloudimage-360-next:before { background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg'); } .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active { opacity: 0.4; cursor: default; } ``` ### Example HTML ```html

```