Docs • Demo • Code Sandbox • Video Tutorial • Why
A simple, interactive resource that can be used to provide a virtual tour of your product.
## 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-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-amount (or amount)
###### Type: **Number** | Default: **36** | _optional_
Amount of images to load 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-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-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-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-bottom-circle-offset (or bottom-circle-offset)
###### Type: **Number** | Default: **5** | _optional_
Bottom offset for 360 view line.
### 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-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)
## Cloudimage Responsive Integration
[See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074)
### Requirements
To use the Cloudimage Responsive plugin, you will need a
Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by
registering [here](https://www.cloudimage.io/en/register_page).
Once your token is created, you can configure it as described below.
This token allows you to use 25GB of image cache and 25GB of worldwide
CDN traffic per month for free.
### data-responsive (or responsive)
###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
Enables cloudimage responsive plugin for 360 view.
### data-filters (or filters)
###### Type: **String** | Default: **q35** | _optional_
Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
rotation... Multiple filters can be applied, separated by "```.```" (dot).
[Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation/en/filters/)
## Lazy Loading
Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like [lazysizes](https://github.com/aFarkas/lazysizes), [yall.js (Yet Another Lazy Loader)](https://github.com/malchata/yall.js), [lozad.js](https://github.com/ApoorvSaxena/lozad.js) to handle it.
[Implementation example with lazysizes](https://codesandbox.io/s/w7vx5w1ln7?fontsize=14)
[Implementation example with yall.js](https://codesandbox.io/s/ym2xrk87xv?fontsize=14)
[Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
to save API calls you man want to use one of our cdn bundles:
CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
```javascript
```
CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
```javascript
```
CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
```javascript
```
## Best practices
* In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
HTTP or HTTPS by Cloudimage. If you want to upload your master images to
Cloudimage, contact us at
[hello@cloudimage.io](mailto:hello@cloudimage.io).
## Browser support
Tested in all modern browsers and IE 11, 10, 9.
## Filerobot UI Familiy
* [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
* [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
* [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
* [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
* [Uploader](https://github.com/scaleflex/filerobot-uploader)
## Contributing!
All contributions are super welcome!
## License
JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)