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