@3dweb/360javascriptviewer 1.8.54 → 1.8.56
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/Readme.md +36 -23
- package/lib/JavascriptViewer.esm.js +1 -1
- package/lib/JavascriptViewer.js +1 -1
- package/package.json +4 -3
package/Readme.md
CHANGED
|
@@ -28,34 +28,47 @@ If the main image is product.jpg, the other images in the same folder must be ca
|
|
|
28
28
|
But if you have other filenames/locations for your 360 images, you can change this naming format behaviour with the imageUrlFormat parameter.
|
|
29
29
|
|
|
30
30
|
|
|
31
|
+
<script defer src="https://cdn.jsdelivr.net/npm/@3dweb/360javascriptviewer/lib/JavascriptViewer.min.js"></script>
|
|
32
|
+
|
|
33
|
+
<style>
|
|
34
|
+
#jsv-holder {
|
|
35
|
+
width:500px;
|
|
36
|
+
}
|
|
37
|
+
#jsv-holder img {
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
</style>
|
|
31
41
|
|
|
32
42
|
<div id="jsv-holder">
|
|
33
|
-
<img id="jsv-image" alt="example" src="https://360-javascriptviewer.
|
|
43
|
+
<img id="jsv-image" alt="example" src="https://360-javascriptviewer.gumlet.io/images/phone/iphone-gold-01.png">
|
|
34
44
|
</div>
|
|
35
45
|
|
|
36
|
-
<script>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
// use
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
viewer.start().then(() => {
|
|
56
|
-
viewer.rotateDegrees(180).then(() => {
|
|
57
|
-
// continue with your amazing intro
|
|
46
|
+
<script>
|
|
47
|
+
window.addEventListener('load', () => {
|
|
48
|
+
const viewer = new JavascriptViewer({
|
|
49
|
+
mainHolderId: 'jsv-holder',
|
|
50
|
+
mainImageId: 'jsv-image', // will hide after loading
|
|
51
|
+
imageUrlFormat: 'iphone-gold-xx.png',
|
|
52
|
+
totalFrames: 72,
|
|
53
|
+
speed: 70,
|
|
54
|
+
defaultProgressBar: true
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
// use events for example
|
|
58
|
+
viewer.events().loadImage.on((progress) => {
|
|
59
|
+
// use this for your own progress bar
|
|
60
|
+
console.log(`loading ${progress.percentage}%`)
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
viewer.events().started.on((result) => {
|
|
64
|
+
// use a promise or a start event to trigger things
|
|
58
65
|
})
|
|
66
|
+
|
|
67
|
+
viewer.start().then(() => {
|
|
68
|
+
viewer.rotateDegrees(180).then(() => {
|
|
69
|
+
// continue with your amazing intro
|
|
70
|
+
})
|
|
71
|
+
});
|
|
59
72
|
});
|
|
60
73
|
</script>
|
|
61
74
|
|