js-cloudimage-360-view 4.0.0-beta.2 → 4.0.0-beta.3

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 (10) hide show
  1. package/README.md +2 -2
  2. package/dist/js-cloudimage-360-view.es.js +2111 -0
  3. package/dist/js-cloudimage-360-view.umd.js +9 -0
  4. package/dist/style.css +1 -0
  5. package/package.json +5 -10
  6. package/vite-npm.config.js +12 -0
  7. package/dist/assets/index-49ZK8EAw.js +0 -9
  8. package/dist/assets/index-CgRAm56E.css +0 -1
  9. package/dist/index.html +0 -697
  10. package/js-cloudimage-360-view-4.0.0-beta.1.tgz +0 -0
package/dist/index.html DELETED
@@ -1,697 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <meta name="description" content="images work in 360 dimensions with several options" />
8
- <link
9
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
10
- rel="stylesheet"
11
- />
12
- <link rel="icon" type="image/png" href="https://cdn.jolipage.co/5c1376c5-e4cd-4250-b760-4c810d7f5fdd/fdf058fa-5faf-4c83-bffa-4faa42b6d252/dc8ef1f26116405e2b275c5020ad8ce1ac071f86bf2134f143c23e692e396f76.png?vh=3632c0">
13
- <link
14
- href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Rubik:wght@400;500;600&display=swap"
15
- rel="stylesheet"
16
- />
17
- <title>JS-Cloudimage-360-view</title>
18
- <script type="module" crossorigin src="/js-cloudimage-360-view/assets/index-49ZK8EAw.js"></script>
19
- <link rel="stylesheet" crossorigin href="/js-cloudimage-360-view/assets/index-CgRAm56E.css">
20
- </head>
21
-
22
- <body>
23
- <section class="content-wrapper">
24
- <header class="header">
25
- <div class="header-logo">
26
- <a href="https://www.scaleflex.com/en/home" target="_blank">
27
- <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex logo" />
28
- </a>
29
- <a
30
- class="cloud-img-title"
31
- href="https://github.com/Scaleflex/js-cloudimage-360-view"
32
- target="_blank"
33
- >
34
- JS Cloudimage 360 view
35
- </a>
36
- </div>
37
- <div class="navbar">
38
- <a
39
- class="stars-button"
40
- href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
41
- target="_blank"
42
- >
43
- <img class="github-icons" src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/star-icon.svg" alt="star" />
44
- <img
45
- src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?color=%23F1F8FF&logo=none&style=social"
46
- alt="star-img"
47
- />
48
- </a>
49
- <a
50
- class="git-button"
51
- href="https://github.com/Scaleflex/js-cloudimage-360-view"
52
- target="_blank"
53
- >
54
- <img
55
- class="github-icons"
56
- src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/github-icon.svg"
57
- alt="github-icon"
58
- />
59
- GitHub
60
- </a>
61
- </div>
62
- </header>
63
-
64
- <div class="content">
65
- <h1>Display <span>every detail</span> from any angle, on any device</h1>
66
- <h2 class="content-text">
67
- Enhance your customer's experience with stunning 360° views of your products.
68
- Create an immersive product experience, every time.
69
- </h2>
70
- <div class="github-sandbox-buttons-wrapper">
71
- <a
72
- class="github-button transition-filled-button"
73
- href="https://github.com/Scaleflex/js-cloudimage-360-view"
74
- target="_blank"
75
- >
76
- View on GitHub
77
- </a>
78
- <a
79
- class="code-sand-box-button"
80
- href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"
81
- target="_blank"
82
- >
83
- Edit to CodeSandbox
84
- </a>
85
- </div>
86
- <div class="car-image container-fluid">
87
- <div
88
- class=""
89
- id="gurkha-suv"
90
- data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
91
- data-filename-x="orange-{index}.jpg"
92
- data-amount-x="73"
93
- data-lazyload
94
- data-autoplay
95
- data-play-once
96
- data-hide-360-logo
97
- data-speed="120"
98
- data-hotspots
99
- data-responsive="scaleflex"
100
- ></div>
101
- <p class="content-text">
102
- Featuring 36 images, autoplay*, bottom 360° view circle, arrow keys support*,
103
- magnifier*, inner box shadow and more!<br/>
104
- (*) available only on desktops
105
- </p>
106
- <div class="cyan-blur-circle hide-in-mobile"></div>
107
- <div class="blue-blur-circle hide-in-mobile"></div>
108
- </div>
109
- <div class="customer-logos container-fluid">
110
- <img class="vivo-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vivo.png?vh=f930bb" alt="vivo logo" />
111
- <img class="jawa-logo" src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Vector+%281%29.png?vh=b9e7a3" alt="jawa logo" />
112
- <img
113
- class="sennheiser-logo"
114
- src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Sennheiser.png?vh=d6e9e7"
115
- alt="Sennheiser logo"
116
- />
117
- <img
118
- class="geelly-logo"
119
- src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Geelly.png?vh=1bd4d0"
120
- alt="Geelly logo"
121
- />
122
- <img
123
- class="yamaha-logo"
124
- src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Yamaha.png?vh=be161d"
125
- alt="yamaha logo"
126
- />
127
- <div class="force-logo-wrapper">
128
- <img
129
- class="force-logo"
130
- src="https://scaleflex.cloudimg.io/v7/demo/company-logos/Force.png?vh=afc507"
131
- alt="force logo"
132
- />
133
- </div>
134
- </div>
135
- </div>
136
- </section>
137
-
138
- <section class="gallery-section container-fluid">
139
- <div class="gallery-title">
140
- <h2>Trusted by top brands, worldwide</h2>
141
- <p>Explore the brands that use our plugins.</p>
142
- </div>
143
- <div class="gallery-content container-fluid">
144
- <div class="motorcycle">
145
- <div
146
- class="cloudimage-360"
147
- data-folder="https://scaleflex.cloudimg.io/v7/demo/jawa-motorcycle/"
148
- data-filename-x="{index}.jpg"
149
- data-amount-x="16"
150
- data-lazyload
151
- pointer-zoom="1.01"
152
- data-magnifier="3"
153
- data-responsive="scaleflex"
154
- ></div>
155
- <p>Toyota</p>
156
- </div>
157
- <div class="vivo-mobile">
158
- <div
159
- class="cloudimage-360"
160
- data-folder="https://scaleflex.cloudimg.io/v7/demo/vivo-mobile/"
161
- data-filename-x="product-{index}.jpg"
162
- data-amount-x="60"
163
- data-drag-speed="100"
164
- data-lazyload
165
- data-responsive="scaleflex"
166
- ></div>
167
- <p>Vivo</p>
168
- </div>
169
- <div class="geely-car">
170
- <div
171
- class="cloudimage-360"
172
- data-folder="https://scaleflex.cloudimg.io/v7/demo/geely-car/"
173
- data-filename-x="Okavango-3-{index}.jpg"
174
- data-amount-x="24"
175
- data-bottom-circle
176
- data-lazyload
177
- data-responsive="scaleflex"
178
- ></div>
179
- <p>Geely</p>
180
- </div>
181
- </div>
182
- </section>
183
-
184
- <section class="demo-usage">
185
- <div class="usage-title">
186
- <h2>Create 360° views, your way</h2>
187
- <p>
188
- Try out our simple, interactive resource to customize an interactive virtual tour of your product.
189
- </p>
190
- </div>
191
-
192
- <div class="demo-usage-wrapper container-fluid">
193
- <div class="demo-usage-content">
194
- <div class="earbuds">
195
- <div
196
- id="demo-generator"
197
- class="cloudimage-360"
198
- data-folder="https://scaleflex.cloudimg.io/v7/demo/earbuds/"
199
- data-filename-x="{index}.jpg"
200
- data-amount-x="233"
201
- data-autoplay
202
- data-speed="100"
203
- data-pointer-zoom="1.5"
204
- data-drag-speed="100"
205
- data-responsive="scaleflex"
206
- data-lazyload
207
- >
208
- <button class="-left control-buttons"></button>
209
- <button class="-right control-buttons"></button>
210
- <button
211
- id="control-up-button"
212
- class="-top control-buttons"
213
- ></button>
214
- <button
215
- id="control-down-button"
216
- class="-bottom control-buttons"
217
- ></button>
218
- </div>
219
- <div class="copy-button-wrapper">
220
- <div class="copy-button">
221
- <img src="https://scaleflex.cloudimg.io/v7/demo/360-assets/icons/copy-icon.svg" alt="copy icon">
222
- <p id="copy-text">Copy</p>
223
- </div>
224
- </div>
225
- <div class="output-code-wrapper" id="code-wrapper">
226
- <div class="output-code">
227
- &lt;div
228
- <div class="code" id="code-block"></div>
229
- >&lt;/div&gt;
230
- </div>
231
- </div>
232
- </div>
233
- <div class="plugin-options-wrapper">
234
- <div class="image-source">
235
- <div class="image-source-options">
236
- <h3>Images source</h3>
237
- <select
238
- class="plugin-options plugin-selector"
239
- id="spin-directions"
240
- >
241
- <option value="X">spin x demo</option>
242
- <option value="Y">spin y demo</option>
243
- </select>
244
- </div>
245
- <div class="image-name-option">
246
- <p class="input-title">Images name x</p>
247
- <input
248
- class="plugin-options"
249
- type="text"
250
- placeholder="airbuds_{index}.jpg"
251
- disabled
252
- />
253
- </div>
254
- <div class="x-amount-option">
255
- <p class="input-title">Select amount-x</p>
256
- <select
257
- class="plugin-options plugin-selector"
258
- id="x-images-selector"
259
- >
260
- <option value="233">233</option>
261
- <option value="72">72</option>
262
- <option value="35">35</option>
263
- </select>
264
- <select
265
- class="plugin-options plugin-selector"
266
- data-plugin-property="data-amount-x"
267
- plugin-input
268
- id="nike-x-images"
269
- >
270
- <option value="35">35 images</option>
271
- <option value="25">25 images</option>
272
- <option value="15">15 images</option>
273
- </select>
274
- </div>
275
- <div id="images-y">
276
- <p class="input-title">Select amount-y</p>
277
- <select
278
- class="plugin-options plugin-selector"
279
- data-plugin-property="data-amount-y"
280
- plugin-input
281
- disabled
282
- >
283
- <option value="36">36 images</option>
284
- </select>
285
- </div>
286
- </div>
287
- <div class="customize">
288
- <h3>Customize</h3>
289
- <div class="customize-wrapper">
290
- <div class="customize-options">
291
- <div class="pointer-checkbox">
292
- <label class="checkbox-container">
293
- Pointer zoom
294
- <input
295
- class="customize-inputs"
296
- data-plugin-property="pointerZoom"
297
- type="checkbox"
298
- checked
299
- id="pointer-checkbox"
300
- />
301
- <span class="checkmark"></span>
302
- </label>
303
- </div>
304
- <div class="customize-selectors-wrappers">
305
- <p class="selectors-wrappers-text">zoom scale</p>
306
- <select
307
- class="customize-selectors plugin-selector"
308
- data-plugin-property="data-pointer-zoom"
309
- id="pointer-zoom-selector"
310
- plugin-input
311
- >
312
- <option selected value="1.5">1.5</option>
313
- <option value="2">2</option>
314
- <option value="2.5">2.5</option>
315
- <option value="3.5">3.5</option>
316
- <option value="4">4</option>
317
- </select>
318
- </div>
319
- </div>
320
- <div class="customize-selectors-wrappers">
321
- <p class="selectors-wrappers-text">Auto play behavior</p>
322
- <select
323
- class="customize-selectors plugin-selector"
324
- id="auto-play-behavior"
325
- data-plugin-property="data-autoplay-behavior"
326
- plugin-input
327
- disabled
328
- >
329
- <option value="spin-xy">spin-xy</option>
330
- <option value="spin-x">spin-x</option>
331
- <option value="spin-y">spin-y</option>
332
- <option value="spin-yx">spin-yx</option>
333
- </select>
334
- </div>
335
- <div class="customize-selectors-wrappers">
336
- <p class="selectors-wrappers-text">Auto play speed(milliseconds)</p>
337
- <input
338
- id="spin-speed"
339
- class="customize-selectors"
340
- data-plugin-property="data-speed"
341
- plugin-input
342
- type="number"
343
- value="100"
344
- placeholder="e.g. 100"
345
- />
346
- </div>
347
- <div class="customize-selectors-wrappers">
348
- <p class="selectors-wrappers-text">Drag speed(milliseconds)</p>
349
- <input
350
- id="drag-speed"
351
- class="customize-selectors"
352
- data-plugin-property="data-drag-speed"
353
- plugin-input
354
- type="number"
355
- value="120"
356
- placeholder="e.g. 120"
357
- />
358
- </div>
359
- <div class="checkbox-group">
360
- <div>
361
- <label class="checkbox-container">
362
- Magnifier
363
- <input
364
- id="image-magnifier"
365
- class="customize-inputs plugin-option"
366
- data-plugin-property="magnifier"
367
- data-plugin-value="2"
368
- type="checkbox"
369
- />
370
- <span class="checkmark"></span>
371
- </label>
372
- </div>
373
- <div>
374
- <label class="checkbox-container">
375
- Auto play
376
- <input
377
- data-plugin-property="autoplay"
378
- class="plugin-option"
379
- type="checkbox"
380
- checked
381
- />
382
- <span class="checkmark"></span>
383
- </label>
384
- </div>
385
- <div>
386
- <label class="checkbox-container">
387
- Auto play once
388
- <input
389
- data-plugin-property="playOnce"
390
- class="plugin-option"
391
- type="checkbox"
392
- />
393
- <span class="checkmark"></span>
394
- </label>
395
- </div>
396
- <div>
397
- <label class="checkbox-container">
398
- Auto play reverse
399
- <input
400
- data-plugin-property="autoplayReverse"
401
- class="plugin-option"
402
- type="checkbox"
403
- />
404
- <span class="checkmark"></span>
405
- </label>
406
- </div>
407
- <div>
408
- <label class="checkbox-container">
409
- Fullscreen
410
- <input
411
- data-plugin-property="fullscreen"
412
- class="plugin-option"
413
- type="checkbox"
414
- />
415
- <span class="checkmark"></span>
416
- </label>
417
- </div>
418
- <div>
419
- <label class="checkbox-container">
420
- Draggable
421
- <input
422
- data-plugin-property="draggable"
423
- class="plugin-option"
424
- type="checkbox"
425
- checked
426
- />
427
- <span class="checkmark"></span>
428
- </label>
429
- </div>
430
- <div>
431
- <label class="checkbox-container">
432
- Drag reverse
433
- <input
434
- data-plugin-property="dragReverse"
435
- class="plugin-option"
436
- type="checkbox"
437
- />
438
- <span class="checkmark"></span>
439
- </label>
440
- </div>
441
- <div>
442
- <label class="checkbox-container">
443
- Control
444
- <input
445
- id="control-option"
446
- class="plugin-option"
447
- type="checkbox"
448
- data-plugin-property="data-control"
449
- />
450
- <span class="checkmark"></span>
451
- </label>
452
- </div>
453
- <div>
454
- <label class="checkbox-container">
455
- Control reverse
456
- <input
457
- data-plugin-property="control-reverse"
458
- class="plugin-option"
459
- type="checkbox"
460
- />
461
- <span class="checkmark"></span>
462
- </label>
463
- </div>
464
- <div>
465
- <label class="checkbox-container">
466
- Control by keyboard
467
- <input
468
- data-plugin-property="data-keys"
469
- class="plugin-option"
470
- type="checkbox"
471
- />
472
- <span class="checkmark"></span>
473
- </label>
474
- </div>
475
- <div>
476
- <label class="checkbox-container">
477
- Control by keyboard reverse
478
- <input
479
- data-plugin-property="data-control-reverse"
480
- class="plugin-option"
481
- type="checkbox"
482
- />
483
- <span class="checkmark"></span>
484
- </label>
485
- </div>
486
- <div>
487
- <label class="checkbox-container">
488
- Stop at edges
489
- <input
490
- data-plugin-property="stopAtEdges"
491
- class="plugin-option"
492
- type="checkbox"
493
- />
494
- <span class="checkmark"></span>
495
- </label>
496
- </div>
497
- </div>
498
- </div>
499
- </div>
500
- </div>
501
- </div>
502
- </div>
503
- </div>
504
- </section>
505
-
506
- <section class="questions">
507
- <h2>Any questions?</h2>
508
- <p>
509
- Contact us at <span>hello@cloudimage.io</span>, our experts will be
510
- happy to help!
511
- </p>
512
- <div class="issue-button-wrapper">
513
- <a
514
- class="issue-button transition-filled-button"
515
- href="https://github.com/scaleflex/js-cloudimage-360-view/issues/new"
516
- target="_blank"
517
- >
518
- Submit GitHub issue
519
- </a>
520
- </div>
521
- <div class="cyan-blur-circle hide-in-mobile"></div>
522
- <div class="green-blur-circle hide-in-mobile"></div>
523
- </section>
524
-
525
- <section class="footer container-fluid">
526
- <div class="accordion-wrapper">
527
- <div>
528
- <div class="filerobot-accordion">
529
- <button data-accordion="2">Info</button>
530
- <img
531
- data-accordion="2"
532
- src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
533
- alt="down-arrow"
534
- />
535
- </div>
536
- <div class="accordion-content" data-accordion-content="2">
537
- <div class="footer-info-content">
538
- <a
539
- href="https://github.com/scaleflex/js-cloudimage-360-view"
540
- target="_blank"
541
- >
542
- View GitHub
543
- </a>
544
- <a
545
- href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
546
- target="_blank"
547
- >
548
- Current Issues
549
- </a>
550
- <a
551
- href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
552
- target="_blank"
553
- >
554
- Documentation
555
- </a>
556
- </div>
557
- </div>
558
- </div>
559
- <div>
560
- <div class="filerobot-accordion">
561
- <button data-accordion="1">Filerobot</button>
562
- <img
563
- data-accordion="1"
564
- src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/down-arrow-icon.png"
565
- alt="down-arrow"
566
- />
567
- </div>
568
- <div class="accordion-content" data-accordion-content="1">
569
- <div class="footer-filerobot-content">
570
- <a
571
- href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
572
- target="_blank"
573
- >
574
- Filerobot Media Asset Widget
575
- </a>
576
- <a
577
- href="https://scaleflex.github.io/filerobot-image-editor/"
578
- target="_blank"
579
- >
580
- Filerobot Image Editor
581
- </a>
582
- <a
583
- href="https://scaleflex.github.io/js-cloudimage-responsive/"
584
- target="_blank"
585
- >
586
- Cloudimage Responsive
587
- </a>
588
- <a
589
- href="https://scaleflex.github.io/js-cloudimage-360-view/"
590
- target="_blank"
591
- >
592
- Cloudimage 360 view
593
- </a>
594
- </div>
595
- </div>
596
- </div>
597
- </div>
598
- <div class="navbar">
599
- <a
600
- class="stars"
601
- href="https://github.com/scaleflex/js-cloudimage-360-view/stargazers"
602
- target="_blank"
603
- >
604
- <img class="star" src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/star-icon.svg" alt="star" />
605
- <img
606
- class="stars-label"
607
- src="https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?logo=none&style=social"
608
- alt="star-img"
609
- />
610
- </a>
611
- <a
612
- class="github"
613
- href="https://github.com/scaleflex/js-cloudimage-360-view"
614
- target="_blank"
615
- >
616
- <img
617
- src="https://scaleflex.cloudimg.io/v7/assets/cloudimage-responsive-assets/github-icon.svg"
618
- alt="github-icon"
619
- />
620
- <p>GitHub</p>
621
- </a>
622
- </div>
623
- <div class="footer-logo">
624
- <a href="https://www.scaleflex.com/en/home" target="_blank">
625
- <img src="https://scaleflex.cloudimg.io/v7/demo/cloudimage-responsive-demo/Logo.svg?vh=6276cc" alt="scaleflex-logo" />
626
- </a>
627
- <p>
628
- Made with ❤ by the
629
- <span>
630
- <a href=" https://scaleflex.com/en/home" target="_blank">Scaleflex</a>
631
- </span>
632
- team, the guys behind
633
- <span>
634
- <a href=" https://cloudimage.io/en/home" target="_blank"
635
- >Cloudimage.io</a></span>. Powered by
636
- <span>
637
- <a href="https://filerobot.com/en/home" target="_blank">Filerobot</a></span>. All rights reserved.
638
- </p>
639
- <div class="footer-blur-circle"></div>
640
- </div>
641
- <div class="footer-wrapper">
642
- <div class="footer-info">
643
- <h4>Info</h4>
644
- <div class="footer-info-content">
645
- <a
646
- href="https://github.com/scaleflex/js-cloudimage-360-view"
647
- target="_blank"
648
- >
649
- View GitHub
650
- </a>
651
- <a
652
- href="https://github.com/scaleflex/js-cloudimage-360-view/issues/"
653
- target="_blank"
654
- >
655
- Current Issues
656
- </a>
657
- <a
658
- href="https://github.com/scaleflex/js-cloudimage-360-view#table_of_contents"
659
- target="_blank"
660
- >
661
- Documentation
662
- </a>
663
- </div>
664
- </div>
665
- <div class="footer-filerobot">
666
- <h4>Filerobot UI Family</h4>
667
- <div class="footer-filerobot-content">
668
- <a
669
- href="https://scaleflex.cloudimg.io/v7/plugins/filerobot-widget/demo/index.html?vh=d6c246&func=proxy&fmaw_path=/"
670
- target="_blank"
671
- >
672
- Filerobot Media Asset Widget
673
- </a>
674
- <a
675
- href="https://scaleflex.github.io/filerobot-image-editor/"
676
- target="_blank"
677
- >
678
- Filerobot Image Editor
679
- </a>
680
- <a
681
- href="https://scaleflex.github.io/js-cloudimage-responsive/"
682
- target="_blank"
683
- >
684
- Cloudimage Responsive
685
- </a>
686
- <a
687
- href="https://scaleflex.github.io/js-cloudimage-360-view"
688
- target="_blank"
689
- >
690
- Cloudimage 360 view
691
- </a>
692
- </div>
693
- </div>
694
- </div>
695
- </section>
696
- </body>
697
- </html>