js-cloudimage-360-view 2.6.0 → 2.7.2-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +75 -48
  2. package/LICENSE +21 -21
  3. package/README.md +572 -435
  4. package/dist/ci360.constants.js +39 -0
  5. package/dist/ci360.service.js +1134 -257
  6. package/dist/ci360.utils.js +85 -137
  7. package/dist/static/css/style.css +121 -0
  8. package/package.json +57 -57
package/README.md CHANGED
@@ -1,435 +1,572 @@
1
- [![Release](https://img.shields.io/badge/release-v2.6.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
- [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
3
- [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
4
- [![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)
5
-
6
- [![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)
7
-
8
- <p align="center">
9
- <img
10
- height="175"
11
- alt="The Lounge"
12
- src="https://demo.cloudimg.io/height/350/n/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
13
- </p>
14
-
15
- <h1 align="center">
16
- JS Cloudimage 360 View
17
- </h1>
18
-
19
- <p align="center">
20
- <strong>
21
- <a href="#table_of_contents">Docs</a>
22
- •
23
- <a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
24
- •
25
- <a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html" target="_blank">Code Sandbox</a>
26
- •
27
- <a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
28
- •
29
- <a href="https://medium.com/cloudimage/e-merchandising-how-can-a-360-view-of-your-products-boost-your-revenue-24b16eb9cd62" target="_blank">Why</a>
30
- </strong>
31
- </p>
32
-
33
- A simple, interactive resource that can be used to provide a virtual tour of your product.
34
-
35
- <p align="center">
36
- <img
37
- alt="The Lounge"
38
- src="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/demo-chair-500.gif?sanitize=true">
39
- </p>
40
-
41
- powered by [Cloudimage](https://www.cloudimage.io/)
42
- ([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
43
-
44
- ## <a name="table_of_contents"></a>Table of contents
45
-
46
- * [Demo](#demo)
47
- * [Step 1: Installation](#installation)
48
- * [Step 2: Initialize](#initialize)
49
- * [Methods](#methods)
50
- * [Configuration](#configuration)
51
- * [Controls](#controls)
52
- * [Cloudimage responsive integration](#cloudimage-responsive-integration)
53
- * [Lazy loading integration](#lazy-loading)
54
- * [Best practices](#best-practices)
55
- * [Browser support](#browser_support)
56
- * [Filerobot UI Family](#ui_family)
57
- * [Contributing](#contributing)
58
- * [License](#license)
59
-
60
-
61
- ## <a name="demo"></a> Demo
62
-
63
- To see the Cloudimage 360 view plugin in action, please check out the
64
- [Demo page](https://scaleflex.github.io/js-cloudimage-360-view/).
65
-
66
- ## <a name="installation"></a>Step 1: Installation
67
-
68
- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
69
-
70
- ```javascript
71
- <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js"></script>
72
- ```
73
-
74
- ## <a name="initialize"></a>Step 2: Initialize
75
-
76
- After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**,
77
- **server folder path**, **file name** and amount of images:
78
-
79
- ```html
80
- <div
81
- class="cloudimage-360"
82
- data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
83
- data-filename="iris-{index}.jpeg"
84
- data-amount="36"
85
- ></div>
86
- ```
87
-
88
- <a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
89
-
90
- ## <a name="methods"></a> Methods
91
-
92
- ### init
93
-
94
- ###### Type: **Function**
95
-
96
- Initialization of js cloudimage 360 view plugin.
97
-
98
- ```javascript
99
- window.CI360.init();
100
- ```
101
-
102
- > 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
103
- > ```javascript
104
- > <script>window.CI360 = { notInitOnLoad: true }</script>
105
- > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
106
- > <script>window.CI360.init(); // initialize the plugin when you need</script>
107
- > ```
108
-
109
- ### destroy
110
-
111
- ###### Type: **Function**
112
-
113
- Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
114
-
115
- ```javascript
116
- window.CI360.destroy();
117
- ```
118
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-initdestroy-y1il9">
119
- <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
120
-
121
- ### getActiveIndexByID
122
-
123
- ###### Type: **Function**
124
-
125
- Get the {index} of the image that is being viewed.
126
-
127
- ```javascript
128
- window.CI360.getActiveIndexByID('id_of_product');
129
- ```
130
-
131
- ## <a name="configuration"></a> Config
132
-
133
- ### class
134
-
135
- ###### Type: **String** | Value: **"cloudimage-360"** | _required_
136
-
137
- The selector for js-cloudimage-360-view lib.
138
-
139
- ### data-folder (or folder)
140
-
141
- ###### Type: **String(url)** | _required_
142
-
143
- Your images folder on server.
144
-
145
- ### data-filename (or filename)
146
-
147
- ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
148
-
149
- 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).
150
-
151
- ### <a name="data-amount"></a> data-amount (or amount)
152
-
153
- ###### Type: **Number** | Default: **36** | _optional_
154
-
155
- Amount of images to load for 360 view.
156
-
157
- ### data-keys (or keys)
158
-
159
- ###### Type: **Bool** | Default: **false** | _optional_
160
-
161
- Support for 360 spin by pressing arrow keys on keyboard.
162
-
163
- ### data-autoplay (or autoplay)
164
-
165
- ###### Type: **Bool** | Default: **false** | _optional_
166
-
167
- Autoplay 360 spin view on load.
168
-
169
- ### data-full-screen (or full-screen)
170
-
171
- ###### Type: **Bool** | Default: **false** | _optional_
172
-
173
- Open 360 spin view in full screen modal.
174
-
175
- ### data-magnifier (or magnifier)
176
-
177
- ###### Type: **Number** | Default: **none** | _optional_
178
-
179
- Magnifier to zoom image.
180
-
181
- ### data-ratio (or ratio)
182
-
183
- ###### Type: **Number** (height / width) | Default: **none** | _optional_
184
-
185
- Prevents page from jumping.
186
-
187
- ### data-autoplay-reverse (or autoplay-reverse)
188
-
189
- ###### Type: **Bool** | Default: **false** | _optional_
190
-
191
- Autoplay 360 spin view on load.
192
-
193
- ### data-speed (or speed)
194
-
195
- ###### Type: **Number** | Default: **150** | _optional_
196
-
197
- Speed of changing frames for autoplay in milliseconds.
198
-
199
- ### data-drag-speed (or drag-speed)
200
-
201
- ###### Type: **Number** | Default: **150** | _optional_
202
-
203
- Speed Factor of changing frames on drag event.
204
-
205
- ### data-spin-reverse (or spin-reverse)
206
-
207
- ###### Type: **Bool** | Default: **false** | _optional_
208
-
209
- Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).
210
-
211
- ### data-box-shadow (or box-shadow)
212
-
213
- ###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_
214
-
215
- Apply box shadow for container.
216
-
217
- ### data-bottom-circle (or bottom-circle)
218
-
219
- ###### Type: **Bool** | Default: **false** | _optional_
220
-
221
- Display 360 view line at the bottom of container.
222
-
223
- ### data-hide-360-logo (or hide-360-logo)
224
-
225
- ###### Type: **Bool** | Default: **false** | _optional_
226
-
227
- Hide 360 view icon.
228
-
229
- ### data-logo-src (or logo-src)
230
-
231
- ###### Type: **String** | Default: **https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg** | _optional_
232
-
233
- URL of asset to use as the 360 view icon.
234
-
235
- ### data-control-reverse (or control-reverse)
236
-
237
- ###### Type: **Bool** | Default: **false** | _optional_
238
-
239
- Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount).
240
-
241
- ### data-stop-at-edges (or stop-at-edges)
242
-
243
- ###### Type: **Bool** | Default: **false** | _optional_
244
-
245
- Blocks repeating images after reaching last image (or first image in opposite direction)
246
-
247
- ### data-bottom-circle-offset (or bottom-circle-offset)
248
-
249
- ###### Type: **Number** | Default: **5** | _optional_
250
-
251
- Bottom offset for 360 view line.
252
-
253
- ### data-index-zero-base (or index-zero-base)
254
-
255
- ###### Type: **Number** | _optional_
256
-
257
- Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
258
-
259
- ### data-image-list (or image-list)
260
-
261
- ###### Type: **Array** | _optional_
262
-
263
- Option to add list of images instead of `folder` & `filename`.
264
-
265
- example:
266
-
267
- ```javascript
268
- data-folder="https://scaleflex.airstore.io/demo/360-car/"
269
- data-image-list='[
270
- "iris-1.jpeg",
271
- "iris-4.jpeg",
272
- "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
273
- "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
274
- ]’
275
- ```
276
-
277
- ### data-lazyload (or lazyload)
278
-
279
- ###### Type: **Bool** | Default: **false** | _optional_
280
-
281
- 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)
282
-
283
- ### data-lazyload-selector (or lazyload-selector)
284
-
285
- ###### Type: **String** | Default: **lazyload** | _optional_
286
-
287
- Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading)
288
-
289
- ## <a name="controls"></a> Controls
290
-
291
- You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**
292
-
293
- ### Example CSS
294
- ```css
295
- .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
296
- padding: 8px;
297
- background: rgba(255, 255, 255, 0.5);
298
- border: none;
299
- border-radius: 4px;
300
- }
301
- .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
302
- outline: none;
303
- }
304
- .cloudimage-360 .cloudimage-360-prev {
305
- display: none;
306
- position: absolute;
307
- z-index: 100;
308
- top: calc(50% - 15px);
309
- left: 20px;
310
- }
311
- .cloudimage-360 .cloudimage-360-next {
312
- display: none;
313
- position: absolute;
314
- z-index: 100;
315
- top: calc(50% - 15px);
316
- right: 20px;
317
- }
318
- .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
319
- content: '';
320
- display: block;
321
- width: 30px;
322
- height: 30px;
323
- background: 50% 50% / cover no-repeat;
324
- }
325
- .cloudimage-360 .cloudimage-360-prev:before {
326
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
327
- }
328
- .cloudimage-360 .cloudimage-360-next:before {
329
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
330
- }
331
- .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
332
- opacity: 0.4;
333
- cursor: default;
334
- }
335
- ```
336
- ### Example HTML
337
- ```html
338
- <div
339
- class="cloudimage-360"
340
- data-folder="https://scaleflex.airstore.io/demo/indoor/"
341
- data-filename="{index}.jpeg"
342
- >
343
- <button class="cloudimage-360-prev"></button>
344
- <button class="cloudimage-360-next"></button>
345
- </div>
346
- ```
347
-
348
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-361eb?fontsize=14"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
349
-
350
- ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
351
-
352
- [See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074)
353
-
354
- ### Requirements
355
-
356
- To use the Cloudimage Responsive plugin, you will need a
357
- Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by
358
- registering [here](https://www.cloudimage.io/en/register_page).
359
- Once your token is created, you can configure it as described below.
360
- This token allows you to use 25GB of image cache and 25GB of worldwide
361
- CDN traffic per month for free.
362
-
363
- ### data-responsive (or responsive)
364
-
365
- ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
366
-
367
- Enables cloudimage responsive plugin for 360 view.
368
-
369
- ### data-filters (or filters)
370
-
371
- ###### Type: **String** | Default: **q35** | _optional_
372
-
373
- Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent,
374
- rotation... Multiple filters can be applied, separated by "```.```" (dot).
375
-
376
- [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation/en/filters/)
377
-
378
- ## <a name="lazy-loading"/> Lazy Loading
379
-
380
- 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.
381
-
382
- [Implementation example with lazysizes](https://codesandbox.io/s/w7vx5w1ln7?fontsize=14)
383
-
384
- [Implementation example with yall.js](https://codesandbox.io/s/ym2xrk87xv?fontsize=14)
385
-
386
- [Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
387
-
388
- to save API calls you man want to use one of our cdn bundles:
389
-
390
- CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
391
-
392
- ```javascript
393
- <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
394
- ```
395
-
396
- CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
397
-
398
- ```javascript
399
- <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
400
- ```
401
-
402
- CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
403
-
404
- ```javascript
405
- <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
406
- ```
407
-
408
-
409
- ## <a name="best-practices"/> Best practices
410
-
411
- * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
412
- or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
413
- HTTP or HTTPS by Cloudimage. If you want to upload your master images to
414
- Cloudimage, contact us at
415
- [hello@cloudimage.io](mailto:hello@cloudimage.io).
416
-
417
- ## <a name="browser_support"></a> Browser support
418
-
419
- Tested in all modern browsers and IE 11, 10, 9.
420
-
421
- ## <a name="ui_family"></a>Filerobot UI Familiy
422
-
423
- * [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
424
- * [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
425
- * [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
426
- * [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
427
- * [Uploader](https://github.com/scaleflex/filerobot-uploader)
428
-
429
- ## <a name="contributing"></a>Contributing!
430
-
431
- All contributions are super welcome!
432
-
433
- ## <a name="license"></a>License
434
- JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
435
-
1
+ [![Release](https://img.shields.io/badge/release-v2.7.1-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
+ [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
3
+ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
4
+ [![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)
5
+
6
+ [![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)
7
+
8
+ <p align="center">
9
+ <img
10
+ height="175"
11
+ alt="The Lounge"
12
+ src="https://assets.scaleflex.com/Marketing/Logos/Cloudimage+Logos/Logotype+with+Scaleflex/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&force_format=jpg">
13
+ </p>
14
+
15
+ <h1 align="center">
16
+ JS Cloudimage 360 View
17
+ </h1>
18
+
19
+ <p align="center">
20
+ <strong>
21
+ <a href="#table_of_contents">Docs</a>
22
+ •
23
+ <a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
24
+ •
25
+ <a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html" target="_blank">Code Sandbox</a>
26
+ •
27
+ <a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
28
+ •
29
+ <a href="https://medium.com/cloudimage/e-merchandising-how-can-a-360-view-of-your-products-boost-your-revenue-24b16eb9cd62" target="_blank">Why</a>
30
+ </strong>
31
+ </p>
32
+
33
+ A simple, interactive resource that can be used to provide a virtual tour of your product.
34
+
35
+ <p align="center">
36
+ <img
37
+ alt="The Lounge"
38
+ src="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/demo-chair-500.gif?sanitize=true">
39
+ </p>
40
+
41
+ powered by [Cloudimage](https://www.cloudimage.io/)
42
+ ([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
43
+
44
+ ## <a name="table_of_contents"></a>Table of contents
45
+
46
+ * [Demo](#demo)
47
+ * [Step 1: Installation](#installation)
48
+ * [Step 2: Initialize](#initialize)
49
+ * [Methods](#methods)
50
+ * [Customize Icons](#customize-icons)
51
+ * [Configuration](#configuration)
52
+ * [Controls](#controls)
53
+ * [Cloudimage responsive integration](#cloudimage-responsive-integration)
54
+ * [Lazy loading integration](#lazy-loading)
55
+ * [Best practices](#best-practices)
56
+ * [Browser support](#browser_support)
57
+ * [Filerobot UI Family](#ui_family)
58
+ * [Contributing](#contributing)
59
+ * [License](#license)
60
+
61
+
62
+ ## <a name="demo"></a> Demo
63
+
64
+ To see the Cloudimage 360 view plugin in action, please check out the
65
+ [Demo page](https://scaleflex.github.io/js-cloudimage-360-view/).
66
+
67
+ ## <a name="installation"></a>Step 1: Installation
68
+
69
+ Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
70
+
71
+ ```javascript
72
+ <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.1/js-cloudimage-360-view.min.js"></script>
73
+ ```
74
+
75
+ ## <a name="initialize"></a>Step 2: Initialize
76
+
77
+ After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**,
78
+ **server folder path**, **file name** and amount of images:
79
+
80
+ ```html
81
+ <div
82
+ class="cloudimage-360"
83
+ data-folder="https://scaleflex.airstore.io/demo/360-car/"
84
+ data-filename="iris-{index}.jpeg"
85
+ data-amount="36"
86
+ ></div>
87
+ ```
88
+
89
+ <a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
90
+
91
+ ## <a name="methods"></a> Methods
92
+
93
+ ### init
94
+
95
+ ###### Type: **Function**
96
+
97
+ Initialization of js cloudimage 360 view plugin.
98
+
99
+ ```javascript
100
+ window.CI360.init();
101
+ ```
102
+
103
+ > 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
104
+ > ```javascript
105
+ > <script>window.CI360 = { notInitOnLoad: true }</script>
106
+ > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
107
+ > <script>window.CI360.init(); // initialize the plugin when you need</script>
108
+ > ```
109
+
110
+ ### destroy
111
+
112
+ ###### Type: **Function**
113
+
114
+ Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
115
+
116
+ ```javascript
117
+ window.CI360.destroy();
118
+ ```
119
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-initdestroy-y1il9">
120
+ <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
121
+
122
+ ### getActiveIndexByID
123
+
124
+ ###### Type: **Function**
125
+
126
+ Get the {index} of the image that is being viewed.
127
+
128
+ ```javascript
129
+ window.CI360.getActiveIndexByID('id_of_product');
130
+ ```
131
+ ## <a name="customize-icons"></a> Customize icons
132
+
133
+ You can customize the icons by adding the following classes:
134
+
135
+ ### Example CSS
136
+ ```css
137
+ .cloudimage-360 .fullscreen-icon {
138
+ background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg) 50% 50% / cover no-repeat;
139
+ }
140
+ .cloudimage-360 .magnify-icon {
141
+ background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
142
+ }
143
+ .cloudimage-360 .close-fullscreen-icon {
144
+ background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
145
+ }
146
+ .cloudimage-360 .reset-zoom-icon {
147
+ background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986) 50% 50% / cover no-repeat;
148
+ }
149
+ ```
150
+
151
+ ## <a name="configuration"></a> Config
152
+
153
+ ### class
154
+
155
+ ###### Type: **String** | Value: **"cloudimage-360"** | _required_
156
+
157
+ The selector for js-cloudimage-360-view lib.
158
+
159
+ ### data-folder (or folder)
160
+
161
+ ###### Type: **String(url)** | _required_
162
+
163
+ Your images folder on server.
164
+ ### data-api-version (or api-version)
165
+
166
+ ###### Type: **String** |Default: **'v7'** | _optional_
167
+
168
+ Allow to use a specific version of API.
169
+
170
+ - set a specific version of API
171
+ ```javascript
172
+ data-api-version="v7"
173
+ ```
174
+ - disable API version
175
+ ```javascript
176
+ data-api-version="null"
177
+ ```
178
+ ### data-filename (or filename)
179
+
180
+ ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
181
+
182
+ 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).
183
+
184
+ ### data-filename-y (or filename-y)
185
+
186
+ ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
187
+
188
+ 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).
189
+
190
+ ### <a name="data-amount"></a> data-amount (or amount)
191
+
192
+ ###### Type: **Number** | Default: **36** | _optional_
193
+
194
+ Amount of images to load for 360 view.
195
+
196
+ ### <a name="data-amount-y"></a> data-amount-y (or amount-y)
197
+
198
+ ###### Type: **Number** | Default: **0** | _optional_
199
+
200
+ Amount of images to load in Y-axis for 360 view.
201
+
202
+ ### data-keys (or keys)
203
+
204
+ ###### Type: **Bool** | Default: **false** | _optional_
205
+
206
+ Support for 360 spin by pressing arrow keys on keyboard.
207
+
208
+ ### data-autoplay (or autoplay)
209
+
210
+ ###### Type: **Bool** | Default: **false** | _optional_
211
+
212
+ Autoplay 360 spin view on load.
213
+
214
+ ### data-play-once (or autoplay)
215
+
216
+ ###### Type: **Bool** | Default: **false** | _optional_
217
+
218
+ stops the autoplay after one complete cycle.
219
+
220
+ ### data-autoplay-behavior (or autoplay-behavior)
221
+
222
+ ###### Type: **String** | Default: **spin-x** | _optional_
223
+
224
+ Changing autoplay behavior
225
+
226
+ Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
227
+
228
+ ### data-full-screen (or full-screen)
229
+
230
+ ###### Type: **Bool** | Default: **false** | _optional_
231
+
232
+ Open 360 spin view in full screen modal.
233
+
234
+ ### data-magnifier (or magnifier)
235
+
236
+ ###### Type: **Number** | Default: **none** | _optional_
237
+
238
+ Magnifier to zoom image.
239
+
240
+ ### data-magnifier-in-fullscreen (or magnifier-in-fullscreen)
241
+
242
+ ###### Type: **bool** | Default: **false** | _optional_
243
+
244
+ enable magnifier in fullscreen modal.
245
+
246
+ ### data-ratio (or ratio)
247
+
248
+ ###### Type: **Number** (height / width) | Default: **none** | _optional_
249
+
250
+ Prevents page from jumping.
251
+
252
+ ### data-autoplay-reverse (or autoplay-reverse)
253
+
254
+ ###### Type: **Bool** | Default: **false** | _optional_
255
+
256
+ Autoplay 360 spin view on load.
257
+
258
+ ### data-disable-drag (or disable-drag)
259
+
260
+ ###### Type: **bool** | Default: **false** | _optional_
261
+
262
+ disable mouse drag.
263
+
264
+ ### data-speed (or speed)
265
+
266
+ ###### Type: **Number** | Default: **150** | _optional_
267
+
268
+ Speed of changing frames for autoplay in milliseconds.
269
+
270
+ ### data-drag-speed (or drag-speed)
271
+
272
+ ###### Type: **Number** | Default: **150** | _optional_
273
+
274
+ Speed Factor of changing frames on drag event.
275
+
276
+ ### data-spin-reverse (or spin-reverse)
277
+
278
+ ###### Type: **Bool** | Default: **false** | _optional_
279
+
280
+ Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).
281
+
282
+ ### data-box-shadow (or box-shadow)
283
+
284
+ ###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_
285
+
286
+ Apply box shadow for container.
287
+
288
+ ### data-bottom-circle (or bottom-circle)
289
+
290
+ ###### Type: **Bool** | Default: **false** | _optional_
291
+
292
+ Display 360 view line at the bottom of container.
293
+
294
+ ### data-hide-360-logo (or hide-360-logo)
295
+
296
+ ###### Type: **Bool** | Default: **false** | _optional_
297
+
298
+ Hide 360 view icon.
299
+
300
+ ### data-logo-src (or logo-src)
301
+
302
+ ###### Type: **String** | Default: **https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg** | _optional_
303
+
304
+ URL of asset to use as the 360 view icon.
305
+
306
+ ### data-control-reverse (or control-reverse)
307
+
308
+ ###### Type: **Bool** | Default: **false** | _optional_
309
+
310
+ Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount).
311
+
312
+ ### data-stop-at-edges (or stop-at-edges)
313
+
314
+ ###### Type: **Bool** | Default: **false** | _optional_
315
+
316
+ Blocks repeating images after reaching last image (or first image in opposite direction)
317
+
318
+ ### data-bottom-circle-offset (or bottom-circle-offset)
319
+
320
+ ###### Type: **Number** | Default: **5** | _optional_
321
+
322
+ Bottom offset for 360 view line.
323
+
324
+ ### data-index-zero-base (or index-zero-base)
325
+
326
+ ###### Type: **Number** | _optional_
327
+
328
+ Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
329
+
330
+ ### data-image-list (or image-list)
331
+
332
+ ###### Type: **Array** | _optional_
333
+
334
+ Option to add list of images instead of `folder` & `filename`.
335
+
336
+ example:
337
+
338
+ ```javascript
339
+ data-folder="https://scaleflex.airstore.io/demo/360-car/"
340
+ data-image-list='[
341
+ "iris-1.jpeg",
342
+ "iris-4.jpeg",
343
+ "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
344
+ "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
345
+ ]’
346
+ ```
347
+
348
+ ### data-lazyload (or lazyload)
349
+
350
+ ###### Type: **Bool** | Default: **false** | _optional_
351
+
352
+ 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)
353
+ ### data-disable-pointer-zoom (or disable-pointer-zoom)
354
+
355
+ ###### Type: **bool** | Default: **false** | _optional_
356
+
357
+ Disable pointer zoom on desktop
358
+
359
+ ### data-disable-pinch-zoom (or disable-pinch-zoom)
360
+
361
+ ###### Type: **bool** | Default: **false** | _optional_
362
+
363
+ Disable pinch zoom on mobile
364
+ ### data-to-start-pointer-zoom (or to-start-pointer-zoom)
365
+
366
+ ###### Type: **string** | Default: **click** | _optional_
367
+
368
+ Events to start pointer zoom
369
+
370
+ Available events (scroll, click)
371
+
372
+ ### data-on-mouse-leave (or on-mouse-leave)
373
+
374
+ ###### Type: **string** | Default: **none** | _optional_
375
+
376
+ Functions called after mouse leave the container
377
+
378
+ Available functions (resetZoom)
379
+
380
+ Multiple functions can be applied, separated by "," (comma)
381
+
382
+ ### data-pointer-zoom-factor (or pointer-zoom-factor)
383
+
384
+ ###### Type: **Number** | Default: **2** | _optional_
385
+
386
+ Pointer zoom scaling factor
387
+ ### data-pinch-zoom-factor (or pinch-zoom-factor)
388
+
389
+ ###### Type: **Number** | Default: **2** | _optional_
390
+
391
+ Pinch zoom scaling factor
392
+
393
+ ### data-max-scale (or max-scale)
394
+
395
+ ###### Type: **Number** | Default: **none** | _optional_
396
+
397
+ Maximum scale that images can be resize to it with pointer or pinch zoom
398
+ ### data-lazyload-selector (or lazyload-selector)
399
+
400
+ ###### Type: **String** | Default: **lazyload** | _optional_
401
+
402
+ Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading)
403
+
404
+
405
+ ## <a name="controls"></a> Controls
406
+
407
+ You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**, **cloudimage-360-top**, **cloudimage-360-bottom**
408
+
409
+ ### Example CSS
410
+ ```css
411
+ .cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
412
+ padding: 8px;
413
+ background: rgba(255, 255, 255, 0.5);
414
+ border: none;
415
+ border-radius: 4px;
416
+ }
417
+ .cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
418
+ outline: none;
419
+ }
420
+ .cloudimage-360 .cloudimage-360-prev {
421
+ display: none;
422
+ position: absolute;
423
+ z-index: 100;
424
+ top: calc(50% - 15px);
425
+ left: 20px;
426
+ }
427
+ .cloudimage-360 .cloudimage-360-next {
428
+ display: none;
429
+ position: absolute;
430
+ z-index: 100;
431
+ top: calc(50% - 15px);
432
+ right: 20px;
433
+ }
434
+ .cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
435
+ content: '';
436
+ display: block;
437
+ width: 30px;
438
+ height: 30px;
439
+ background: 50% 50% / cover no-repeat;
440
+ }
441
+ .cloudimage-360 .cloudimage-360-prev:before {
442
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
443
+ }
444
+ .cloudimage-360 .cloudimage-360-next:before {
445
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
446
+ }
447
+ .cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
448
+ opacity: 0.4;
449
+ cursor: default;
450
+ }
451
+ ```
452
+ ### Example HTML
453
+ ```html
454
+ <div
455
+ class="cloudimage-360"
456
+ data-folder="https://scaleflex.airstore.io/demo/indoor/"
457
+ data-filename="{index}.jpeg"
458
+ >
459
+ <button class="cloudimage-360-prev"></button>
460
+ <button class="cloudimage-360-next"></button>
461
+ <button class="cloudimage-360-top"></button>
462
+ <button class="cloudimage-360-bottom"></button>
463
+ </div>
464
+ ```
465
+
466
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-361eb?fontsize=14"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
467
+
468
+ ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
469
+
470
+ [See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074)
471
+
472
+ ### Requirements
473
+
474
+ To use the Cloudimage Responsive plugin, you will need a
475
+ Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by
476
+ registering [here](https://www.cloudimage.io/en/register_page).
477
+ Once your token is created, you can configure it as described below.
478
+ This token allows you to use 25GB of image cache and 25GB of worldwide
479
+ CDN traffic per month for free.
480
+
481
+ ### data-responsive (or responsive)
482
+
483
+ ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
484
+
485
+ Enables cloudimage responsive plugin for 360 view.
486
+
487
+ ### data-transformation (or transformation)
488
+
489
+ ###### Type: **String** | Default: **none** | _optional_
490
+
491
+ Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement...
492
+ Multiple transformation operations can be applied to your image, separated by "```&```" (Ampersand).
493
+ example:
494
+
495
+ ```html
496
+ data-transformation="w=400&h=200&func=fit"
497
+ ```
498
+
499
+ [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing)
500
+
501
+ ### data-filters (or filters)
502
+
503
+ ###### Type: **String** | Default: **none** | _optional_
504
+
505
+ Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen...
506
+ Multiple filters can be applied, separated by "```,```" (comma).
507
+ example:
508
+
509
+ ```html
510
+ data-filters="bright:15,contrast:30"
511
+ ```
512
+
513
+ [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters)
514
+
515
+ ## <a name="lazy-loading"/> Lazy Loading
516
+
517
+ 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.
518
+
519
+ [Implementation example with lazysizes](https://codesandbox.io/s/w7vx5w1ln7?fontsize=14)
520
+
521
+ [Implementation example with yall.js](https://codesandbox.io/s/ym2xrk87xv?fontsize=14)
522
+
523
+ [Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
524
+
525
+ to save API calls you man want to use one of our cdn bundles:
526
+
527
+ CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7
528
+
529
+ ```javascript
530
+ <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
531
+ ```
532
+
533
+ CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
534
+
535
+ ```javascript
536
+ <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
537
+ ```
538
+
539
+ CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
540
+
541
+ ```javascript
542
+ <script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
543
+ ```
544
+
545
+
546
+ ## <a name="best-practices"/> Best practices
547
+
548
+ * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
549
+ or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
550
+ HTTP or HTTPS by Cloudimage. If you want to upload your master images to
551
+ Cloudimage, contact us at
552
+ [hello@cloudimage.io](mailto:hello@cloudimage.io).
553
+
554
+ ## <a name="browser_support"></a> Browser support
555
+
556
+ Tested in all modern browsers and IE 11, 10, 9.
557
+
558
+ ## <a name="ui_family"></a>Filerobot UI Familiy
559
+
560
+ * [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
561
+ * [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
562
+ * [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
563
+ * [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
564
+ * [Uploader](https://github.com/scaleflex/filerobot-uploader)
565
+
566
+ ## <a name="contributing"></a>Contributing!
567
+
568
+ All contributions are super welcome!
569
+
570
+ ## <a name="license"></a>License
571
+ JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
572
+