js-cloudimage-360-view 3.0.3 → 3.1.0

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 (93) hide show
  1. package/.env +3 -0
  2. package/CHANGELOG.md +167 -156
  3. package/LICENSE +27 -33
  4. package/README.md +820 -806
  5. package/bin/deploy-bundle.js +63 -0
  6. package/dist/ci360.service.js +65 -245
  7. package/dist/ci360.utils.js +2 -14
  8. package/dist/constants/index.js +0 -4
  9. package/dist/constants/props-require-reload.js +24 -12
  10. package/dist/index.js +0 -27
  11. package/dist/static/css/hotspots.css +221 -221
  12. package/dist/static/css/style.css +229 -229
  13. package/dist/utils/auto-play/get-speed-factor.js +0 -2
  14. package/dist/utils/auto-play/is-completed-one-cycle.js +0 -5
  15. package/dist/utils/auto-play/loop.js +3 -14
  16. package/dist/utils/class-names/add-class.js +0 -3
  17. package/dist/utils/class-names/remove-class.js +0 -2
  18. package/dist/utils/container-elements/apply-styles-to-container.js +0 -2
  19. package/dist/utils/container-elements/create-360-view-circle-icon.js +0 -2
  20. package/dist/utils/container-elements/create-360-view-icon.js +0 -2
  21. package/dist/utils/container-elements/create-box-shadow.js +0 -2
  22. package/dist/utils/container-elements/create-canvas.js +0 -2
  23. package/dist/utils/container-elements/create-close-fullscreen-icon.js +0 -2
  24. package/dist/utils/container-elements/create-fullscreen-icon.js +0 -2
  25. package/dist/utils/container-elements/create-fullscreen-modal.js +0 -2
  26. package/dist/utils/container-elements/create-icons-container.js +0 -2
  27. package/dist/utils/container-elements/create-inner-box.js +0 -2
  28. package/dist/utils/container-elements/create-loader.js +0 -2
  29. package/dist/utils/container-elements/create-magnifier-icon.js +0 -2
  30. package/dist/utils/container-elements/index.js +0 -13
  31. package/dist/utils/container-elements/remove-child-from-parent.js +0 -2
  32. package/dist/utils/controls/get-item-skipped.js +0 -2
  33. package/dist/utils/controls/init-controls.js +7 -16
  34. package/dist/utils/hotspots/attach-events/hide-popup.js +0 -2
  35. package/dist/utils/hotspots/attach-events/show-popup.js +0 -2
  36. package/dist/utils/hotspots/configs-error-handler.js +6 -10
  37. package/dist/utils/hotspots/create-popper-instace.js +1 -4
  38. package/dist/utils/hotspots/elements/create-carousel-dot.js +0 -6
  39. package/dist/utils/hotspots/elements/create-carousel-image.js +0 -4
  40. package/dist/utils/hotspots/elements/create-hotspot-icon.js +3 -14
  41. package/dist/utils/hotspots/elements/create-hotspot-popup-link.js +2 -6
  42. package/dist/utils/hotspots/elements/create-hotspots.js +0 -5
  43. package/dist/utils/hotspots/elements/create-images-carousel.js +0 -4
  44. package/dist/utils/hotspots/elements/create-modal-description.js +0 -2
  45. package/dist/utils/hotspots/elements/create-modal-title.js +0 -2
  46. package/dist/utils/hotspots/elements/create-model-elements.js +8 -25
  47. package/dist/utils/hotspots/elements/create-popup-arrow.js +0 -2
  48. package/dist/utils/hotspots/elements/create-popup.js +6 -18
  49. package/dist/utils/hotspots/elements/create-read-more-btn.js +0 -2
  50. package/dist/utils/hotspots/fill-empty-coord-with-previous.js +1 -6
  51. package/dist/utils/hotspots/generate-hotspots-configs.js +11 -21
  52. package/dist/utils/hotspots/generate-popup-config.js +9 -11
  53. package/dist/utils/hotspots/get-hotspot-icon.js +0 -2
  54. package/dist/utils/hotspots/get-hotspot-orientation.js +0 -4
  55. package/dist/utils/hotspots/get-hotspot-popup-node.js +0 -2
  56. package/dist/utils/hotspots/get-popup-node.js +0 -2
  57. package/dist/utils/hotspots/hide-hotspot-icon.js +0 -2
  58. package/dist/utils/hotspots/hide-hotspots-icons.js +0 -3
  59. package/dist/utils/hotspots/is-mouse-on-hotspot.js +0 -2
  60. package/dist/utils/hotspots/prepare-hotspots-positions.js +0 -6
  61. package/dist/utils/hotspots/set-current-slide.js +0 -2
  62. package/dist/utils/hotspots/toggle-popup-events.js +0 -4
  63. package/dist/utils/hotspots/update-hotspot-icon-position.js +0 -2
  64. package/dist/utils/hotspots/update-hotspots.js +6 -14
  65. package/dist/utils/image-src/generate-images-path.js +8 -17
  66. package/dist/utils/image-src/is-props-change-require-reload.js +0 -5
  67. package/dist/utils/index.js +0 -26
  68. package/dist/utils/load-images/images-from-folder/prepare-images-from-folder.js +2 -11
  69. package/dist/utils/load-images/images-from-list/prepare-images-from-list.js +0 -8
  70. package/dist/utils/load-images/lazyload/init-lazyload.js +3 -11
  71. package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-folder.js +1 -5
  72. package/dist/utils/load-images/lazyload/prepare-first-image/prepare-first-image-from-list.js +0 -9
  73. package/dist/utils/load-images/load-image-as-promise.js +8 -46
  74. package/dist/utils/load-images/load-images-relative-to-container-size.js +10 -49
  75. package/dist/utils/load-images/load-original-images.js +23 -37
  76. package/dist/utils/load-images/pad.js +0 -2
  77. package/dist/utils/load-images/preload-images.js +2 -9
  78. package/dist/utils/load-images/preload-original-images.js +2 -9
  79. package/dist/utils/magnify/get-current-original-image.js +0 -6
  80. package/dist/utils/magnify/get-cursor-position.js +0 -2
  81. package/dist/utils/magnify/magnify.js +4 -11
  82. package/dist/utils/magnify/move-magnifier.js +6 -14
  83. package/dist/utils/responsive/contain.js +0 -2
  84. package/dist/utils/responsive/fit.js +0 -4
  85. package/dist/utils/responsive/get-image-aspect-ratio.js +0 -8
  86. package/dist/utils/responsive/get-responsive-width-of-container.js +0 -3
  87. package/dist/utils/responsive/get-size-according-to-pixel-ratio.js +0 -2
  88. package/dist/utils/responsive/get-size-limit.js +0 -2
  89. package/dist/utils/spin-y/get-moving-direction.js +0 -3
  90. package/dist/utils/zoom/generate-zoom-in-steps.js +0 -2
  91. package/dist/utils/zoom/generate-zoom-out-steps.js +0 -2
  92. package/package.json +67 -62
  93. package/yarn-error.log +101 -0
package/README.md CHANGED
@@ -1,806 +1,820 @@
1
- [![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
- [![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)
3
- [![Download](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)
4
- [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
5
- [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
- [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
7
- [![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
8
-
9
- <p align="center">
10
- <img
11
- alt="cloudimage logo"
12
- src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
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/js-cloudimage-360-view-examples-npne18" 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
- <p align="center">A simple, interactive resource that can be used to provide a virtual tour of your product.</p>
33
- <p align="center">
34
- <img
35
- alt="The Lounge"
36
- src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/demos/assets/a2.gif">
37
- </p>
38
-
39
- ## <a name="table_of_contents"></a>Table of contents
40
-
41
- * [Demo](#demo)
42
- * [Step 1: Installation](#installation)
43
- * [Step 2: Initialize](#initialize)
44
- * [Methods](#methods)
45
- * [Customize elements](#customize-elements)
46
- * [Configuration](#configuration)
47
- * [Controls](#controls)
48
- * [Spin in X and Y axis](#spin_x_y)
49
- * [Hotspots](#hotspots)
50
- * [Cloudimage responsive integration](#cloudimage-responsive-integration)
51
- * [Lazy loading integration](#lazy-loading)
52
- * [Best practices](#best-practices)
53
- * [Browser support](#browser_support)
54
- * [Filerobot UI Family](#ui_family)
55
- * [Contributing](#contributing)
56
- * [License](#license)
57
-
58
-
59
- ## <a name="demo"></a> Demo
60
-
61
- To see the Cloudimage 360 view plugin in action, please check out the
62
- [Demo page](https://scaleflex.github.io/js-cloudimage-360-view/).
63
-
64
- ## <a name="installation"></a>Step 1: Installation
65
-
66
- Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
67
-
68
- ```javascript
69
- <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.3/js-cloudimage-360-view.min.js"></script>
70
- ```
71
-
72
- ## <a name="initialize"></a>Step 2: Initialize
73
-
74
- After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**,
75
- **server folder path**, **file name** and amount of images:
76
-
77
- ```html
78
- <div
79
- class="cloudimage-360"
80
- id="gurkha-suv"
81
- data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
82
- data-filename-x="orange-{index}.jpg"
83
- data-amount-x="73"
84
- ></div>
85
- ```
86
-
87
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-example-l7ce4h"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
88
-
89
- ## <a name="methods"></a> Methods
90
-
91
- ### init
92
-
93
- ###### Type: **Function**
94
-
95
- Initialization of js cloudimage 360 view plugin.
96
-
97
- ```javascript
98
- window.CI360.init();
99
- ```
100
-
101
- > 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
102
- > ```javascript
103
- > <script>window.CI360 = { notInitOnLoad: true }</script>
104
- > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
105
- > <script>window.CI360.init(); // initialize the plugin when you need</script>
106
- > ```
107
-
108
- ### add
109
-
110
- ###### Type: **Function**
111
-
112
- ```javascript
113
- window.CI360.add(idOftheView: string);
114
- ```
115
- lazy init cloudimage-360 view by id.
116
- ### Properties
117
- #### `idOftheView`: string
118
- The id of the new view
119
-
120
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-vxlmoi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
121
-
122
- ### update
123
-
124
- ###### Type: **Function**
125
- ```javascript
126
- window.CI360.update(idOftheView, forceUpdate);
127
- ```
128
- Update cloudimage 360 viewer instance.<br/>
129
- For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`),
130
- the plugin will re-init.
131
- ### Properties
132
- #### `idOftheView`: string
133
- The id of the new view
134
- #### `forceUpdate`: bool
135
- Force the view to reinitialize.
136
-
137
- ```html
138
- <div
139
- class="cloudimage-360"
140
- id="gurkha-suv"
141
- data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
142
- data-filename-x="orange-{index}.jpg"
143
- data-amount-x="73"
144
- ></div>
145
- ```
146
- ```javascript
147
- window.CI360.update('gurkha-suv');
148
- ```
149
-
150
- ```javascript
151
- window.CI360.update(null, true);
152
- ```
153
-
154
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-n7m04e"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
155
-
156
- ### destroy
157
-
158
- ###### Type: **Function**
159
-
160
- Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
161
-
162
- ```javascript
163
- window.CI360.destroy();
164
- ```
165
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-03pb2t">
166
- <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
167
-
168
- ### getActiveIndexByID
169
-
170
- ###### Type: **Function**
171
-
172
- Get the {index} of the image that is being viewed.
173
-
174
- ```javascript
175
- window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);
176
- ```
177
- ### Properties
178
- #### `idOfInstance`: string
179
- The id of the instance
180
-
181
- #### `oriantation`: string
182
- The oriantation of the active index
183
-
184
- ## <a name="customize-elements"></a> Customize elements
185
-
186
- You can customize elements by adding the following classes:
187
-
188
- ### Example CSS
189
- ```css
190
- .cloudimage-360-icons-container {
191
- top: 5px;
192
- right: 5px;
193
- }
194
- .cloudimage-360-fullscreen-modal {
195
- top: 0;
196
- bottom: 0;
197
- }
198
- .cloudimage-360-magnifier-icon {
199
- background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
200
- }
201
- .cloudimage-360-close-fullscreen-icon {
202
- background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
203
- }
204
- .cloudimage-360-view-360-circle {
205
- margin: auto;
206
- }
207
- .cloudimage-360-loader {
208
- margin: auto;
209
- }
210
- .cloudimage-360-view-360-icon {
211
- background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
212
- }
213
- .cloudimage-360-box-shadow {
214
- top: 0;
215
- left: 0;
216
- }
217
- .cloudimage-360-img-magnifier-glass {
218
- border: 3px solid #000;
219
- border-radius: 50%;
220
- }
221
- ```
222
-
223
- ## <a name="configuration"></a> Config
224
-
225
- ### class
226
-
227
- ###### Type: **String** | Value: **"cloudimage-360"** | _required_
228
-
229
- The selector for js-cloudimage-360-view lib.
230
-
231
- ### data-folder (or folder)
232
-
233
- ###### Type: **String(url)** | _required_
234
-
235
- Your images folder on server.
236
- ### data-api-version (or api-version)
237
-
238
- ###### Type: **String** |Default: **'v7'** | _optional_
239
-
240
- Allow to use a specific version of API.
241
-
242
- - set a specific version of API
243
- ```javascript
244
- data-api-version="v7"
245
- ```
246
- - disable API version
247
- ```javascript
248
- data-api-version="null"
249
- ```
250
- ### data-filename-x (or filename-x)
251
-
252
- ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
253
-
254
- The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and [data-amount-x](#data-amount-x).
255
-
256
- ### data-filename-y (or filename-y)
257
-
258
- ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
259
- The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
260
-
261
- ### data-amount-x (or amount-x)
262
- ###### Type: **Number** | Default: **36** | _optional_
263
-
264
- Amount of images to load in X-axis for 360 view .
265
-
266
- ### data-amount-y (or amount-y)
267
-
268
- ###### Type: **Number** | Default: **0** | _optional_
269
-
270
- Amount of images to load in Y-axis for 360 view.
271
-
272
- ### data-keys (or keys)
273
-
274
- ###### Type: **Bool** | Default: **false** | _optional_
275
-
276
- Support for 360 spin by pressing arrow keys on keyboard.
277
-
278
- ### data-keys-reverse (or keys-reverse)
279
-
280
- ###### Type: **Bool** | Default: **false** | _optional_
281
-
282
- invert arrow keys on keyboard.
283
-
284
- ### data-autoplay (or autoplay)
285
-
286
- ###### Type: **Bool** | Default: **false** | _optional_
287
-
288
- Autoplay 360 spin view on load.
289
-
290
- ### data-play-once (or autoplay)
291
-
292
- ###### Type: **Bool** | Default: **false** | _optional_
293
-
294
- stops the autoplay after one complete cycle.
295
-
296
- ### data-autoplay-behavior (or autoplay-behavior)
297
-
298
- ###### Type: **String** | Default: **spin-x** | _optional_
299
-
300
- Changing autoplay behavior
301
-
302
- Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
303
-
304
- ### data-fullscreen (or fullscreen)
305
- ###### Type: **Bool** | Default: **false** | _optional_
306
-
307
- Open 360 spin view in full screen modal.
308
-
309
- ### data-magnifier (or magnifier)
310
-
311
- ###### Type: **Number** | Default: **none** | _optional_
312
-
313
- Magnifier to zoom image.
314
-
315
- ### data-ratio (or ratio)
316
- ###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
317
- #### `ratio`: string
318
-
319
- Setting the height relative to the container width according to the provided ratio</br>
320
-
321
- ```html
322
- <div
323
- class="cloudimage-360"
324
- id="gurkha-suv"
325
- data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
326
- data-filename-x="orange-{index}.jpg"
327
- data-amount-x="73"
328
- data-ratio="2"
329
- ></div>
330
- ```
331
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-865iz5"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
332
- #### `ratio`: JSON
333
- Setting the height relative to the container width at any window size.
334
-
335
- In the following example, the height should be 1.3 the container width at window size less than or equal to 567px
336
- and 2.22 at window size less than or equal to 768px.
337
-
338
- ```html
339
- <div
340
- class="cloudimage-360"
341
- id="gurkha-suv"
342
- data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
343
- data-filename-x="orange-{index}.jpg"
344
- data-amount-x="73"
345
- data-ratio='{
346
- "576": "1.3",
347
- "768": "2.22",
348
- "992": "2.23",
349
- "1200": "3",
350
- "2400": "3.2"
351
- }'
352
- ></div>
353
- ```
354
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-xzx8no"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
355
-
356
- ### data-autoplay-reverse (or autoplay-reverse)
357
-
358
- ###### Type: **Bool** | Default: **false** | _optional_
359
-
360
- Autoplay 360 spin view on load.
361
-
362
- ### data-disable-drag (or disable-drag)
363
-
364
- ###### Type: **bool** | Default: **false** | _optional_
365
-
366
- disable mouse drag.
367
-
368
- ### data-speed (or speed)
369
-
370
- ###### Type: **Number** | Default: **150** | _optional_
371
-
372
- Speed of changing frames for autoplay in milliseconds.
373
-
374
- ### data-drag-speed (or drag-speed)
375
-
376
- ###### Type: **Number** | Default: **150** | _optional_
377
-
378
- Speed Factor of changing frames on drag event.
379
-
380
- ### data-spin-reverse (or spin-reverse)
381
-
382
- ###### Type: **Bool** | Default: **false** | _optional_
383
-
384
- Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount-x).
385
-
386
- ### data-box-shadow (or box-shadow)
387
-
388
- ###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_
389
-
390
- Apply box shadow for container.
391
-
392
- ### data-bottom-circle (or bottom-circle)
393
-
394
- ###### Type: **Bool** | Default: **false** | _optional_
395
-
396
- Display 360 view line at the bottom of container.
397
-
398
- ### data-hide-360-logo (or hide-360-logo)
399
-
400
- ###### Type: **Bool** | Default: **false** | _optional_
401
-
402
- Hide 360 view icon.
403
-
404
- ### data-control-reverse (or control-reverse)
405
-
406
- ###### Type: **Bool** | Default: **false** | _optional_
407
-
408
- Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount-x).
409
-
410
- ### data-stop-at-edges (or stop-at-edges)
411
-
412
- ###### Type: **Bool** | Default: **false** | _optional_
413
-
414
- Blocks repeating images after reaching last image (or first image in opposite direction)
415
-
416
- ### data-bottom-circle-offset (or bottom-circle-offset)
417
-
418
- ###### Type: **Number** | Default: **5** | _optional_
419
-
420
- Bottom offset for 360 view line.
421
-
422
- ### data-index-zero-base (or index-zero-base)
423
-
424
- ###### Type: **Number** | _optional_
425
-
426
- Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
427
-
428
- ### data-image-list-x (or data-image-list-x)
429
- ###### Type: **Array** | _optional_
430
-
431
- Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`.
432
-
433
- example:
434
-
435
- ```javascript
436
- data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
437
- data-image-list-x='[
438
- "iris-1.jpeg",
439
- "iris-4.jpeg",
440
- "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg",
441
- "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg"
442
- ]’
443
- ```
444
-
445
- ### data-image-list-y (or data-image-list-y)
446
-
447
- ###### Type: **Array** | _optional_
448
-
449
- Option to add list of images in y-oriantation instead of `folder` , `filename-y` & `amount-y`.
450
-
451
- example:
452
-
453
- ```javascript
454
- data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
455
- data-image-list-y='[
456
- "iris-2-y.jpeg",
457
- "iris-6-y.jpeg",
458
- "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg",
459
- "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg"
460
- ]’
461
- ```
462
- ### data-pointer-zoom (or pointer-zoom)
463
-
464
- ###### Type: **Number** | Default: **none** | _optional_
465
-
466
- Option to scale images on click on it to provided value.
467
-
468
- example:
469
-
470
- ```javascript
471
- data-pointer-zoom="3"
472
- ```
473
-
474
- ### data-lazyload (or lazyload)
475
-
476
- ###### Type: **Bool** | Default: **false** | _optional_
477
-
478
- 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)
479
- ### data-lazyload-selector (or lazyload-selector)
480
-
481
- ###### Type: **String** | Default: **lazyload** | _optional_
482
-
483
- Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading)
484
-
485
-
486
- ## <a name="controls"></a> Controls
487
-
488
- You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom
489
-
490
- ### Example CSS
491
- ```css
492
- .cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right {
493
- padding: 8px;
494
- background: rgba(255, 255, 255, 0.5);
495
- border: none;
496
- border-radius: 4px;
497
- }
498
- .cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus {
499
- outline: none;
500
- }
501
- .cloudimage-360 .cloudimage-360-left {
502
- display: none;
503
- position: absolute;
504
- z-index: 100;
505
- top: calc(50% - 15px);
506
- left: 20px;
507
- }
508
- .cloudimage-360 .cloudimage-360-right {
509
- display: none;
510
- position: absolute;
511
- z-index: 100;
512
- top: calc(50% - 15px);
513
- right: 20px;
514
- }
515
- .cloudimage-360 .cloudimage-360-left:before, .cloudimage-360 .cloudimage-360-right:before {
516
- content: '';
517
- display: block;
518
- width: 30px;
519
- height: 30px;
520
- background: 50% 50% / cover no-repeat;
521
- }
522
- .cloudimage-360 .cloudimage-360-left:before {
523
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
524
- }
525
- .cloudimage-360 .cloudimage-360-right:before {
526
- background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
527
- }
528
- .cloudimage-360 .cloudimage-360-left.not-active, .cloudimage-360 .cloudimage-360-right.not-active {
529
- opacity: 0.4;
530
- cursor: default;
531
- }
532
- ```
533
- ### Example HTML
534
- ```html
535
- <div
536
- class="cloudimage-360"
537
- data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
538
- data-filename-x="{index}.jpeg"
539
- >
540
- <button class="cloudimage-360-left"></button>
541
- <button class="cloudimage-360-right"></button>
542
- <button class="cloudimage-360-top"></button>
543
- <button class="cloudimage-360-bottom"></button>
544
- </div>
545
- ```
546
-
547
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
548
-
549
- ## <a name="spin_x_y"/> Spin in X and Y axes
550
- Allow the view to spin in both X, Y axes
551
- ### Requirements
552
- We need to provide the `file-name` of the y-axis images using <a href="#data-filename-y-or-filename-y">data-filename-y</a>
553
-
554
- Also as we did for the x-axis if we are intializing the view using <a href="#data-folder-or-folder">data-folder</a> and <a href="#data-filename-y-or-filename-y">data-filename-y</a>
555
- so we need to provide <a href="#data-amount-y-or-amount-y">data-amount-y</a> which indicates the number of images on the y-axis.
556
- example:
557
-
558
- ```javascript
559
- <div
560
- class="cloudimage-360"
561
- data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
562
- data-filename-x="nike-{index}.jpg"
563
- data-filename-y="nike-y-{index}.jpg"
564
- data-amount-x="35"
565
- data-amount-y="36"
566
- >
567
- </div>
568
- ```
569
- <a href="https://codesandbox.io/s/js-cloudimage-360-view-wc9j12?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a></br>
570
- > Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.</br>
571
- Just we need to provide the <a href="#data-amount-y-or-amount-y">data-amount-y</a>
572
- ## <a name="hotspots"/> Hotspots or Markers
573
- Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
574
- ### Requirements
575
- First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config.
576
- Also we need to set an `id` attribute, we will need it to link the view with the hotspots config.
577
-
578
- ### Create hotspots configuration
579
- The hotspots config should be an array of objects, each object in the array indicates a single hotspot config.
580
- For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it. <br>hint: To know the current image index we will need to set `data-info="white || black"` attribute.
581
-
582
- example:
583
-
584
- ```js
585
- const HOTSPOTS_CONFIG = [
586
- {
587
- positions: [
588
- { imageIndex: 0, xCoord: 527, yCoord: 319 },
589
- { imageIndex: 1, xCoord: 524 },
590
- { imageIndex: 2, xCoord: 520 },
591
- { imageIndex: 3, xCoord: 498 },
592
- { imageIndex: 4, xCoord: 470 },
593
- { imageIndex: 5, xCoord: 441 },
594
- ]
595
- }
596
- ]
597
- ```
598
- In the previous example, we have only set the Ycoord a single time at the image index 0.
599
- So if the coord didn't change there's no need to reset it, it will already take the previous value.
600
-
601
- Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below.
602
- ## Variant
603
- ### Link
604
- we need to provide the URL of the link and the link title.
605
-
606
- example:
607
-
608
- ```js
609
- const HOTSPOTS_CONFIG = [
610
- {
611
- positions,
612
- variant: {
613
- title: 'New Gurkha Technical Specifications',
614
- url: 'https://www.forcegurkha.co.in/specifications/',
615
- newTab: true
616
- }
617
- }
618
- ]
619
- ```
620
- ---
621
- ### Popup
622
- Only the property inserted will displayed.
623
- | Property |Type | Default | Description |
624
- | ------------- | ------------- | ------------- |------------- |
625
- | images | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image |
626
- | title |String| null | Display title underneath the images |
627
- | description| String | null | Display description underneath the title |
628
- | moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL |
629
- | moreDetailsTitle | String | null| Set the title of the more details button |
630
-
631
- example:
632
- ```js
633
- const HOTSPOTS_CONFIG = [
634
- {
635
- positions,
636
- variant: {
637
- images: [
638
- { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
639
- ], // optional
640
- title: 'Air Intake Snorkel', // optional
641
- description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional
642
- moreDetailsUrl: 'https://forcegurkha.co.in', // optional
643
- moreDetailsTitle: 'Read more' // optional
644
- }
645
- }
646
- ]
647
- ```
648
- ---
649
- ### Custom
650
- Display any element in the DOM in a popup and link it with the hotspot.</br>
651
- We will need to set the variant property value to the id of the element.
652
-
653
- example:
654
- ```js
655
- const HOTSPOTS_CONFIG = [
656
- {
657
- positions,
658
- variant: 'gurkha-suv'
659
- }
660
- ]
661
- ```
662
- ## PopupProps
663
- Options to customize the hotspot popup.
664
- ### Properties
665
- | Property | Type | Defaullt |Description |
666
- | ------------- | ------------- | ------------- | ------------- |
667
- | popupSelector |String| null |Set className to the popup wrapper |
668
- | open |Boolean | false |Open the popup |
669
- | arrow |Boolean| true |Dipslay an arrow that points toward the hotspot element|
670
- | offset|Array | [0, 0] |Set a distance between the hotspot element and the popup |
671
- | placement|String| Auto|- we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right)|
672
-
673
-
674
- example:
675
- ```js
676
- const HOTSPOTS_CONFIG = [
677
- {
678
- positions,
679
- variant,
680
- popupProps: {
681
- popupSelector: 'air-intake-popup', // optional
682
- offset: [20, 5], // optional
683
- arrow: false, // optional
684
- placement: 'bottom' // optional
685
- },
686
- indicatorSelector: 'first-hotspot-icon' // optional
687
- }
688
- ]
689
- ```
690
- ## Responsive hotspots
691
- Now we need to make our hotspots responsive to have an accurate positioning in different screens.
692
- we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.<br/>
693
- hint: `data-info` can be used to get view size.
694
-
695
- example:
696
- ```js
697
- const HOTSPOTS_CONFIG = [
698
- {
699
- positions,
700
- variant,
701
- popupProps,
702
- indicatorSelector,
703
- initialDimensions: [ 1170, 662 ]
704
- }
705
- ]
706
- ```
707
- ## Add Hotspots
708
- we need this function to link the created config with the 360-view.
709
- ```js
710
- window.CI360.addHotspots(idOftheView, hotspotsConfig);
711
- ```
712
- example:
713
- ```js
714
- window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);
715
- ```
716
- <a href="https://codesandbox.io/s/competent-bogdan-49b0u6"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
717
-
718
- ### data-responsive (or responsive)
719
-
720
- ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
721
-
722
- Enables cloudimage responsive plugin for 360 view.
723
-
724
- ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
725
-
726
- [See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074)
727
-
728
- ### Requirements
729
-
730
- To use the Cloudimage Responsive plugin, you will need a
731
- Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by
732
- registering [here](https://www.cloudimage.io/en/register_page).
733
- Once your token is created, you can configure it as described below.
734
- This token allows you to use 25GB of image cache and 25GB of worldwide
735
- CDN traffic per month for free.
736
-
737
- ### data-responsive (or responsive)
738
-
739
- ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
740
-
741
- Enables cloudimage responsive plugin for 360 view.
742
-
743
- ### data-transformation (or transformation)
744
-
745
- ###### Type: **String** | Default: **none** | _optional_
746
-
747
- Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement...
748
- Multiple transformation operations can be applied to your image, separated by "```&```" (Ampersand).
749
- example:
750
-
751
- ```html
752
- data-transformation="w=400&h=200&func=fit"
753
- ```
754
-
755
- [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing)
756
-
757
- ### data-filters (or filters)
758
-
759
- ###### Type: **String** | Default: **none** | _optional_
760
-
761
- Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen...
762
- Multiple filters can be applied, separated by "```,```" (comma).
763
- example:
764
-
765
- ```html
766
- data-filters="bright:15,contrast:30"
767
- ```
768
-
769
- [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters)
770
-
771
- ## <a name="lazy-loading"/> Lazy Loading
772
-
773
- 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.
774
-
775
- [Implementation example with lazysizes](https://codesandbox.io/s/js-cloudimage-360-view-examples-ux850x)
776
-
777
- [Implementation example with yall.js](https://codesandbox.io/s/js-cloudimage-360-view-xjpdg1)
778
-
779
- [Implementation example with lozad.js](https://codesandbox.io/s/js-cloudimage-360-view-examples-8iukcn)
780
-
781
- ## <a name="best-practices"/> Best practices
782
-
783
- * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
784
- or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
785
- HTTP or HTTPS by Cloudimage. If you want to upload your master images to
786
- Cloudimage, contact us at
787
- [hello@cloudimage.io](mailto:hello@cloudimage.io).
788
-
789
- ## <a name="browser_support"></a> Browser support
790
-
791
- Tested in all modern browsers and IE 11, 10, 9.
792
-
793
- ## <a name="ui_family"></a>Filerobot UI Familiy
794
-
795
- * [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
796
- * [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
797
- * [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
798
- * [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
799
- * [Uploader](https://github.com/scaleflex/filerobot-uploader)
800
-
801
- ## <a name="contributing"></a>Contributing!
802
-
803
- All contributions are super welcome!
804
-
805
- ## <a name="license"></a>License
806
- JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
1
+ [![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
2
+ [![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)
3
+ [![Download](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)
4
+ [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
5
+ [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
+ [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
7
+ [![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
8
+
9
+ <p align="center">
10
+ <a href="https://www.cloudimage.io/#gh-light-mode-only">
11
+ <img
12
+ alt="cloudimage logo"
13
+ src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
14
+ </a>
15
+ <a href="https://www.cloudimage.io/#gh-dark-mode-only">
16
+ <img
17
+ alt="cloudimage logo"
18
+ src="https://scaleflex.cloudimg.io/v7/cloudimage.io/cloudimage-logo-light.png?vh=b798ab&w=350">
19
+ </a>
20
+ </p>
21
+
22
+ <h1 align="center">
23
+ JS Cloudimage 360 View
24
+ </h1>
25
+
26
+ <p align="center">
27
+ <strong>
28
+ <a href="#table_of_contents">Docs</a>
29
+ •
30
+ <a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
31
+ •
32
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18" target="_blank">Code Sandbox</a>
33
+ •
34
+ <a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
35
+ •
36
+ <a href="https://medium.com/cloudimage/e-merchandising-how-can-a-360-view-of-your-products-boost-your-revenue-24b16eb9cd62" target="_blank">Why</a>
37
+ </strong>
38
+ </p>
39
+ <p align="center">A simple, interactive resource that can be used to provide a virtual tour of your product.</p>
40
+ <p align="center">
41
+ <img
42
+ alt="The Lounge"
43
+ src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/demos/assets/a2.gif">
44
+ </p>
45
+
46
+ ## <a name="table_of_contents"></a>Table of contents
47
+
48
+ * [Demo](#demo)
49
+ * [Step 1: Installation](#installation)
50
+ * [Step 2: Initialize](#initialize)
51
+ * [Methods](#methods)
52
+ * [Customize elements](#customize-elements)
53
+ * [Configuration](#configuration)
54
+ * [Controls](#controls)
55
+ * [Spin in X and Y axis](#spin_x_y)
56
+ * [Hotspots or Markers](#hotspots)
57
+ * [Cloudimage responsive integration](#cloudimage-responsive-integration)
58
+ * [Lazy loading integration](#lazy-loading)
59
+ * [Best practices](#best-practices)
60
+ * [Browser support](#browser_support)
61
+ * [Filerobot UI Family](#ui_family)
62
+ * [Contributing](#contributing)
63
+ * [License](#license)
64
+
65
+
66
+ ## <a name="demo"></a> Demo
67
+
68
+ To see the Cloudimage 360 view plugin in action, please check out the
69
+ [Demo page](https://scaleflex.github.io/js-cloudimage-360-view/).
70
+
71
+ ## <a name="installation"></a>Step 1: Installation
72
+
73
+ Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
74
+
75
+ ```javascript
76
+ <script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></script>
77
+ ```
78
+
79
+ ## <a name="initialize"></a>Step 2: Initialize
80
+
81
+ After adding the js-cloudimage-360-view lib, simply initialize it with **class name "cloudimage-360"**,
82
+ **server folder path**, **file name** and amount of images:
83
+
84
+ ```html
85
+ <div
86
+ class="cloudimage-360"
87
+ id="gurkha-suv"
88
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
89
+ data-filename-x="orange-{index}.jpg"
90
+ data-amount-x="73"
91
+ ></div>
92
+ ```
93
+
94
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-example-l7ce4h"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
95
+
96
+ ## <a name="methods"></a> Methods
97
+
98
+ ### init
99
+
100
+ ###### Type: **Function**
101
+
102
+ Initialization of js cloudimage 360 view plugin.
103
+
104
+ ```javascript
105
+ window.CI360.init();
106
+ ```
107
+
108
+ > 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
109
+ > ```javascript
110
+ > <script>window.CI360 = { notInitOnLoad: true }</script>
111
+ > <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
112
+ > <script>window.CI360.init(); // initialize the plugin when you need</script>
113
+ > ```
114
+
115
+ ### add
116
+
117
+ ###### Type: **Function**
118
+
119
+ ```javascript
120
+ window.CI360.add(idOftheView: string);
121
+ ```
122
+ lazy init cloudimage-360 view by id.
123
+ ###### arguments
124
+ `idOftheView`: string
125
+ The id of the new view
126
+
127
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-vxlmoi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
128
+
129
+ ### update
130
+
131
+ ###### Type: **Function**
132
+ ```javascript
133
+ window.CI360.update(idOftheView, forceUpdate);
134
+ ```
135
+ Update cloudimage 360 viewer instance.<br/>
136
+ For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`),
137
+ the plugin will re-init.
138
+ ###### arguments
139
+ `idOftheView`: string
140
+ The id of the new view
141
+
142
+ `forceUpdate`: bool
143
+ Force the view to reinitialize.
144
+
145
+ ```html
146
+ <div
147
+ class="cloudimage-360"
148
+ id="gurkha-suv"
149
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
150
+ data-filename-x="orange-{index}.jpg"
151
+ data-amount-x="73"
152
+ ></div>
153
+ ```
154
+ ```javascript
155
+ window.CI360.update('gurkha-suv');
156
+ ```
157
+
158
+ ```javascript
159
+ window.CI360.update(null, true);
160
+ ```
161
+
162
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-n7m04e"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
163
+
164
+ ### destroy
165
+
166
+ ###### Type: **Function**
167
+
168
+ Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.
169
+
170
+ ```javascript
171
+ window.CI360.destroy();
172
+ ```
173
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-03pb2t">
174
+ <img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
175
+
176
+ ### getActiveIndexByID
177
+
178
+ ###### Type: **Function**
179
+
180
+ Get the {index} of the image that is being viewed.
181
+
182
+ ```javascript
183
+ window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);
184
+ ```
185
+ ###### arguments
186
+ `idOfInstance`: string
187
+ The id of the instance
188
+
189
+ `oriantation`: string
190
+ The oriantation of the active index
191
+
192
+ ## <a name="customize-elements"></a> Customize elements
193
+
194
+ You can customize elements by adding the following classes:
195
+
196
+ ### Example CSS
197
+ ```css
198
+ .cloudimage-360-icons-container {
199
+ top: 5px;
200
+ right: 5px;
201
+ }
202
+ .cloudimage-360-fullscreen-modal {
203
+ top: 0;
204
+ bottom: 0;
205
+ }
206
+ .cloudimage-360-magnifier-icon {
207
+ background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
208
+ }
209
+ .cloudimage-360-close-fullscreen-icon {
210
+ background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
211
+ }
212
+ .cloudimage-360-view-360-circle {
213
+ margin: auto;
214
+ }
215
+ .cloudimage-360-loader {
216
+ margin: auto;
217
+ }
218
+ .cloudimage-360-view-360-icon {
219
+ background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
220
+ }
221
+ .cloudimage-360-box-shadow {
222
+ top: 0;
223
+ left: 0;
224
+ }
225
+ .cloudimage-360-img-magnifier-glass {
226
+ border: 3px solid #000;
227
+ border-radius: 50%;
228
+ }
229
+ ```
230
+
231
+ ## <a name="configuration"></a> Config
232
+
233
+ ### class
234
+
235
+ ###### Type: **String** | Value: **"cloudimage-360"** | _required_
236
+
237
+ The selector for js-cloudimage-360-view lib.
238
+
239
+ ### data-folder (or folder)
240
+
241
+ ###### Type: **String(url)** | _required_
242
+
243
+ Your images folder on server.
244
+ ### data-api-version (or api-version)
245
+
246
+ ###### Type: **String** |Default: **'v7'** | _optional_
247
+
248
+ Allow to use a specific version of API.
249
+
250
+ - set a specific version of API
251
+ ```javascript
252
+ data-api-version="v7"
253
+ ```
254
+ - disable API version
255
+ ```javascript
256
+ data-api-version="null"
257
+ ```
258
+ ### data-filename-x (or filename-x)
259
+
260
+ ###### Type: **String** | Default: **image-{index}.jpg** | _optional_
261
+
262
+ The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and [data-amount-x](#data-amount-x).
263
+
264
+ ### data-filename-y (or filename-y)
265
+
266
+ ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
267
+ The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
268
+
269
+ ### data-amount-x (or amount-x)
270
+ ###### Type: **Number** | Default: **36** | _optional_
271
+
272
+ Amount of images to load in X-axis for 360 view .
273
+
274
+ ### data-amount-y (or amount-y)
275
+
276
+ ###### Type: **Number** | Default: **0** | _optional_
277
+
278
+ Amount of images to load in Y-axis for 360 view.
279
+
280
+ ### data-keys (or keys)
281
+
282
+ ###### Type: **Bool** | Default: **false** | _optional_
283
+
284
+ Support for 360 spin by pressing arrow keys on keyboard.
285
+
286
+ ### data-keys-reverse (or keys-reverse)
287
+
288
+ ###### Type: **Bool** | Default: **false** | _optional_
289
+
290
+ invert arrow keys on keyboard.
291
+
292
+ ### data-autoplay (or autoplay)
293
+
294
+ ###### Type: **Bool** | Default: **false** | _optional_
295
+
296
+ Autoplay 360 spin view on load.
297
+
298
+ ### data-play-once (or autoplay)
299
+
300
+ ###### Type: **Bool** | Default: **false** | _optional_
301
+
302
+ stops the autoplay after one complete cycle.
303
+
304
+ ### data-autoplay-behavior (or autoplay-behavior)
305
+
306
+ ###### Type: **String** | Default: **spin-x** | _optional_
307
+
308
+ Changing autoplay behavior
309
+
310
+ Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
311
+
312
+ ### data-fullscreen (or fullscreen)
313
+ ###### Type: **Bool** | Default: **false** | _optional_
314
+
315
+ Open 360 spin view in full screen modal.
316
+
317
+ ### data-magnifier (or magnifier)
318
+
319
+ ###### Type: **Number** | Default: **none** | _optional_
320
+
321
+ Magnifier to zoom image.
322
+
323
+ ### data-ratio (or ratio)
324
+ ###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
325
+ #### `ratio`: string
326
+
327
+ Setting the height relative to the container width according to the provided ratio</br>
328
+
329
+ ```html
330
+ <div
331
+ class="cloudimage-360"
332
+ id="gurkha-suv"
333
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
334
+ data-filename-x="orange-{index}.jpg"
335
+ data-amount-x="73"
336
+ data-ratio="2"
337
+ ></div>
338
+ ```
339
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-865iz5"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
340
+ #### `ratio`: JSON
341
+ Setting the height relative to the container width at any window size.
342
+
343
+ In the following example, the height should be 1.3 the container width at window size less than or equal to 567px
344
+ and 2.22 at window size less than or equal to 768px.
345
+
346
+ ```html
347
+ <div
348
+ class="cloudimage-360"
349
+ id="gurkha-suv"
350
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
351
+ data-filename-x="orange-{index}.jpg"
352
+ data-amount-x="73"
353
+ data-ratio='{
354
+ "576": "1.3",
355
+ "768": "2.22",
356
+ "992": "2.23",
357
+ "1200": "3",
358
+ "2400": "3.2"
359
+ }'
360
+ ></div>
361
+ ```
362
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-xzx8no"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
363
+
364
+ ### data-autoplay-reverse (or autoplay-reverse)
365
+
366
+ ###### Type: **Bool** | Default: **false** | _optional_
367
+
368
+ Autoplay 360 spin view on load.
369
+
370
+ ### data-disable-drag (or disable-drag)
371
+
372
+ ###### Type: **bool** | Default: **false** | _optional_
373
+
374
+ disable mouse drag.
375
+
376
+ ### data-speed (or speed)
377
+
378
+ ###### Type: **Number** | Default: **150** | _optional_
379
+
380
+ Speed of changing frames for autoplay in milliseconds.
381
+
382
+ ### data-drag-speed (or drag-speed)
383
+
384
+ ###### Type: **Number** | Default: **150** | _optional_
385
+
386
+ Speed Factor of changing frames on drag event.
387
+
388
+ ### data-spin-reverse (or spin-reverse)
389
+
390
+ ###### Type: **Bool** | Default: **false** | _optional_
391
+
392
+ Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount-x).
393
+
394
+ ### data-box-shadow (or box-shadow)
395
+
396
+ ###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_
397
+
398
+ Apply box shadow for container.
399
+
400
+ ### data-bottom-circle (or bottom-circle)
401
+
402
+ ###### Type: **Bool** | Default: **false** | _optional_
403
+
404
+ Display 360 view line at the bottom of container.
405
+
406
+ ### data-hide-360-logo (or hide-360-logo)
407
+
408
+ ###### Type: **Bool** | Default: **false** | _optional_
409
+
410
+ Hide 360 view icon.
411
+
412
+ ### data-control-reverse (or control-reverse)
413
+
414
+ ###### Type: **Bool** | Default: **false** | _optional_
415
+
416
+ Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount-x).
417
+
418
+ ### data-stop-at-edges (or stop-at-edges)
419
+
420
+ ###### Type: **Bool** | Default: **false** | _optional_
421
+
422
+ Blocks repeating images after reaching last image (or first image in opposite direction)
423
+
424
+ ### data-bottom-circle-offset (or bottom-circle-offset)
425
+
426
+ ###### Type: **Number** | Default: **5** | _optional_
427
+
428
+ Bottom offset for 360 view line.
429
+
430
+ ### data-index-zero-base (or index-zero-base)
431
+
432
+ ###### Type: **Number** | _optional_
433
+
434
+ Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
435
+
436
+ ### data-image-list-x (or data-image-list-x)
437
+ ###### Type: **Array** | _optional_
438
+
439
+ Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`.
440
+
441
+ example:
442
+
443
+ ```javascript
444
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
445
+ data-image-list-x='[
446
+ "iris-1.jpeg",
447
+ "iris-4.jpeg",
448
+ "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg",
449
+ "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg"
450
+ ]’
451
+ ```
452
+
453
+ ### data-image-list-y (or data-image-list-y)
454
+
455
+ ###### Type: **Array** | _optional_
456
+
457
+ Option to add list of images in y-oriantation instead of `folder` , `filename-y` & `amount-y`.
458
+
459
+ example:
460
+
461
+ ```javascript
462
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
463
+ data-image-list-y='[
464
+ "iris-2-y.jpeg",
465
+ "iris-6-y.jpeg",
466
+ "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg",
467
+ "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg"
468
+ ]’
469
+ ```
470
+ ### data-pointer-zoom (or pointer-zoom)
471
+
472
+ ###### Type: **Number** | Default: **none** | _optional_
473
+
474
+ Option to scale images on click on it to provided value.
475
+
476
+ example:
477
+
478
+ ```javascript
479
+ data-pointer-zoom="3"
480
+ ```
481
+
482
+ ### data-lazyload (or lazyload)
483
+
484
+ ###### Type: **Bool** | Default: **false** | _optional_
485
+
486
+ 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)
487
+ ### data-lazyload-selector (or lazyload-selector)
488
+
489
+ ###### Type: **String** | Default: **lazyload** | _optional_
490
+
491
+ Helper class to apply lazy-loading depending on library you choose, see [Lazy loading](#lazy-loading)
492
+
493
+
494
+ ## <a name="controls"></a> Controls
495
+
496
+ You can add controls by adding elements with the following classes: **cloudimage-360-left**, **cloudimage-360-right**, **cloudimage-360-top**, **cloudimage-360-bottom
497
+
498
+ ### Example CSS
499
+ ```css
500
+ .cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right {
501
+ padding: 8px;
502
+ background: rgba(255, 255, 255, 0.5);
503
+ border: none;
504
+ border-radius: 4px;
505
+ }
506
+ .cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus {
507
+ outline: none;
508
+ }
509
+ .cloudimage-360 .cloudimage-360-left {
510
+ display: none;
511
+ position: absolute;
512
+ z-index: 100;
513
+ top: calc(50% - 15px);
514
+ left: 20px;
515
+ }
516
+ .cloudimage-360 .cloudimage-360-right {
517
+ display: none;
518
+ position: absolute;
519
+ z-index: 100;
520
+ top: calc(50% - 15px);
521
+ right: 20px;
522
+ }
523
+ .cloudimage-360 .cloudimage-360-left:before, .cloudimage-360 .cloudimage-360-right:before {
524
+ content: '';
525
+ display: block;
526
+ width: 30px;
527
+ height: 30px;
528
+ background: 50% 50% / cover no-repeat;
529
+ }
530
+ .cloudimage-360 .cloudimage-360-left:before {
531
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
532
+ }
533
+ .cloudimage-360 .cloudimage-360-right:before {
534
+ background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
535
+ }
536
+ .cloudimage-360 .cloudimage-360-left.not-active, .cloudimage-360 .cloudimage-360-right.not-active {
537
+ opacity: 0.4;
538
+ cursor: default;
539
+ }
540
+ ```
541
+ ### Example HTML
542
+ ```html
543
+ <div
544
+ class="cloudimage-360"
545
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
546
+ data-filename-x="{index}.jpeg"
547
+ >
548
+ <button class="cloudimage-360-left"></button>
549
+ <button class="cloudimage-360-right"></button>
550
+ <button class="cloudimage-360-top"></button>
551
+ <button class="cloudimage-360-bottom"></button>
552
+ </div>
553
+ ```
554
+
555
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
556
+
557
+ ## <a name="spin_x_y"/> Spin in X and Y axes
558
+ Allow the view to spin in both X, Y axes
559
+ ### Requirements
560
+ We need to provide the `file-name` of the y-axis images using <a href="#data-filename-y-or-filename-y">data-filename-y</a>
561
+
562
+ Also as we did for the x-axis if we are intializing the view using <a href="#data-folder-or-folder">data-folder</a> and <a href="#data-filename-y-or-filename-y">data-filename-y</a>
563
+ so we need to provide <a href="#data-amount-y-or-amount-y">data-amount-y</a> which indicates the number of images on the y-axis.
564
+ example:
565
+
566
+ ```javascript
567
+ <div
568
+ class="cloudimage-360"
569
+ data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
570
+ data-filename-x="nike-{index}.jpg"
571
+ data-filename-y="nike-y-{index}.jpg"
572
+ data-amount-x="35"
573
+ data-amount-y="36"
574
+ >
575
+ </div>
576
+ ```
577
+ <a href="https://codesandbox.io/s/js-cloudimage-360-view-wc9j12?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a></br>
578
+ > Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.</br>
579
+ Just we need to provide the <a href="#data-amount-y-or-amount-y">data-amount-y</a>
580
+ ## <a name="hotspots"/> Hotspots or Markers
581
+ Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
582
+ ### Requirements
583
+ First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config.
584
+ Also we need to set an `id` attribute, we will need it to link the view with the hotspots config.
585
+
586
+ ### Create hotspots configuration
587
+ The hotspots config should be an array of objects, each object in the array indicates a single hotspot config.
588
+ For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it. <br>hint: To know the current image index we will need to set `data-info="white || black"` attribute.
589
+
590
+ example:
591
+
592
+ ```js
593
+ const HOTSPOTS_CONFIG = [
594
+ {
595
+ positions: [
596
+ { imageIndex: 0, xCoord: 527, yCoord: 319 },
597
+ { imageIndex: 1, xCoord: 524 },
598
+ { imageIndex: 2, xCoord: 520 },
599
+ { imageIndex: 3, xCoord: 498 },
600
+ { imageIndex: 4, xCoord: 470 },
601
+ { imageIndex: 5, xCoord: 441 },
602
+ ]
603
+ }
604
+ ]
605
+ ```
606
+ In the previous example, we have only set the Ycoord a single time at the image index 0.
607
+ So if the coord didn't change there's no need to reset it, it will already take the previous value.
608
+
609
+ Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below.
610
+ ## Variant
611
+ ### Link
612
+ we need to provide the URL of the link and the link title.
613
+
614
+ example:
615
+
616
+ ```js
617
+ const HOTSPOTS_CONFIG = [
618
+ {
619
+ positions,
620
+ variant: {
621
+ title: 'New Gurkha Technical Specifications',
622
+ url: 'https://www.forcegurkha.co.in/specifications/',
623
+ newTab: true
624
+ }
625
+ }
626
+ ]
627
+ ```
628
+ ---
629
+ ### Popup
630
+ Only the property inserted will displayed.
631
+ | Property |Type | Default | Description |
632
+ | ------------- | ------------- | ------------- |------------- |
633
+ | images | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image |
634
+ | title |String| null | Display title underneath the images |
635
+ | description| String | null | Display description underneath the title |
636
+ | moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL |
637
+ | moreDetailsTitle | String | null| Set the title of the more details button |
638
+
639
+ example:
640
+ ```js
641
+ const HOTSPOTS_CONFIG = [
642
+ {
643
+ positions,
644
+ variant: {
645
+ images: [
646
+ { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
647
+ ], // optional
648
+ title: 'Air Intake Snorkel', // optional
649
+ description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional
650
+ moreDetailsUrl: 'https://forcegurkha.co.in', // optional
651
+ moreDetailsTitle: 'Read more' // optional
652
+ }
653
+ }
654
+ ]
655
+ ```
656
+ ---
657
+ ### Custom
658
+ Display any element in the DOM in a popup and link it with the hotspot.</br>
659
+ We will need to set the variant property value to the id of the element.
660
+
661
+ example:
662
+ ```js
663
+ const HOTSPOTS_CONFIG = [
664
+ {
665
+ positions,
666
+ variant: 'gurkha-suv'
667
+ }
668
+ ]
669
+ ```
670
+ ## PopupProps
671
+ Options to customize the hotspot popup.
672
+ ### Properties
673
+ | Property | Type | Defaullt |Description |
674
+ | ------------- | ------------- | ------------- | ------------- |
675
+ | popupSelector |String| null |Set className to the popup wrapper |
676
+ | open |Boolean | false |Open the popup |
677
+ | arrow |Boolean| true |Dipslay an arrow that points toward the hotspot element|
678
+ | offset|Array | [0, 0] |Set a distance between the hotspot element and the popup |
679
+ | placement|String| Auto|- we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right)|
680
+
681
+
682
+ example:
683
+ ```js
684
+ const HOTSPOTS_CONFIG = [
685
+ {
686
+ positions,
687
+ variant,
688
+ popupProps: {
689
+ popupSelector: 'air-intake-popup', // optional
690
+ offset: [20, 5], // optional
691
+ arrow: false, // optional
692
+ placement: 'bottom' // optional
693
+ },
694
+ indicatorSelector: 'first-hotspot-icon' // optional
695
+ }
696
+ ]
697
+ ```
698
+ ## Responsive hotspots
699
+ Now we need to make our hotspots responsive to have an accurate positioning in different screens.
700
+ we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.<br/>
701
+ hint: `data-info` can be used to get view size.
702
+
703
+ example:
704
+ ```js
705
+ const HOTSPOTS_CONFIG = [
706
+ {
707
+ positions,
708
+ variant,
709
+ popupProps,
710
+ indicatorSelector,
711
+ initialDimensions: [ 1170, 662 ]
712
+ }
713
+ ]
714
+ ```
715
+ ## Add Hotspots
716
+ we need this function to link the created config with the 360-view.
717
+ ```js
718
+ window.CI360.addHotspots(idOftheView, hotspotsConfig);
719
+ ```
720
+ example:
721
+ ```js
722
+ window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);
723
+ ```
724
+ <a href="https://codesandbox.io/s/competent-bogdan-49b0u6"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
725
+
726
+ ### data-responsive (or responsive)
727
+
728
+ ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
729
+
730
+ Enables cloudimage responsive plugin for 360 view.
731
+
732
+ ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
733
+
734
+ [See how it works (article on Medium)](https://medium.com/cloudimage/responsive-images-in-2019-now-easier-than-ever-b76e5a43c074)
735
+
736
+ ### Requirements
737
+
738
+ To use the Cloudimage Responsive plugin, you will need a
739
+ Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by
740
+ registering [here](https://www.cloudimage.io/en/register_page).
741
+ Once your token is created, you can configure it as described below.
742
+ This token allows you to use 25GB of image cache and 25GB of worldwide
743
+ CDN traffic per month for free.
744
+
745
+ ### data-responsive (or responsive)
746
+
747
+ ###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
748
+
749
+ Enables cloudimage responsive plugin for 360 view.
750
+
751
+ ### data-request-responsive-images (or request-responsive-images)
752
+
753
+ ###### Type: **Bool** | Default: **false**
754
+
755
+ Request new images on resize, based on the container width.
756
+
757
+ ### data-transformation (or transformation)
758
+
759
+ ###### Type: **String** | Default: **none** | _optional_
760
+
761
+ Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement...
762
+ Multiple transformation operations can be applied to your image, separated by "```&```" (Ampersand).
763
+ example:
764
+
765
+ ```html
766
+ data-transformation="w=400&h=200&func=fit"
767
+ ```
768
+
769
+ [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing)
770
+
771
+ ### data-filters (or filters)
772
+
773
+ ###### Type: **String** | Default: **none** | _optional_
774
+
775
+ Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen...
776
+ Multiple filters can be applied, separated by "```,```" (comma).
777
+ example:
778
+
779
+ ```html
780
+ data-filters="bright:15,contrast:30"
781
+ ```
782
+
783
+ [Full documentation here.](https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-filters)
784
+
785
+ ## <a name="lazy-loading"/> Lazy Loading
786
+
787
+ 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.
788
+
789
+ [Implementation example with lazysizes](https://codesandbox.io/s/js-cloudimage-360-view-examples-ux850x)
790
+
791
+ [Implementation example with yall.js](https://codesandbox.io/s/js-cloudimage-360-view-xjpdg1)
792
+
793
+ [Implementation example with lozad.js](https://codesandbox.io/s/js-cloudimage-360-view-examples-8iukcn)
794
+
795
+ ## <a name="best-practices"/> Best practices
796
+
797
+ * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
798
+ or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
799
+ HTTP or HTTPS by Cloudimage. If you want to upload your master images to
800
+ Cloudimage, contact us at
801
+ [hello@cloudimage.io](mailto:hello@cloudimage.io).
802
+
803
+ ## <a name="browser_support"></a> Browser support
804
+
805
+ Tested in all modern browsers and IE 11, 10, 9.
806
+
807
+ ## <a name="ui_family"></a>Filerobot UI Familiy
808
+
809
+ * [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
810
+ * [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
811
+ * [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
812
+ * [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
813
+ * [Uploader](https://github.com/scaleflex/filerobot-uploader)
814
+
815
+ ## <a name="contributing"></a>Contributing!
816
+
817
+ All contributions are super welcome!
818
+
819
+ ## <a name="license"></a>License
820
+ JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)