@3dweb/360javascriptviewer 1.8.55 → 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.
Files changed (2) hide show
  1. package/Readme.md +36 -23
  2. 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.com/images/ipod/ipod.jpg">
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
- const viewer = new JavascriptViewer({
38
- mainHolderId: 'jsv-holder',
39
- mainImageId: 'jsv-image',
40
- totalFrames: 72,
41
- speed: 70,
42
- defaultProgressBar: true
43
- });
44
-
45
- // use events for example
46
- viewer.events().loadImage.on((progress) => {
47
- // use this for your own progress bar
48
- console.log(`loading ${progress.percentage}%`)
49
- })
50
-
51
- viewer.events().started.on((result) => {
52
- // use a promise or a start event to trigger things
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
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@3dweb/360javascriptviewer",
3
- "version": "1.8.55",
3
+ "version": "1.8.56",
4
4
  "description": "A 360 javascript viewer working with images",
5
5
  "type": "module",
6
6
  "module": "lib/JavascriptViewer.esm.js",
@@ -28,7 +28,8 @@
28
28
  "ws": "ws",
29
29
  "version": "npm run format && git add -A src",
30
30
  "postversion": "git push && git push --tags",
31
- "test": "mocha -r ts-node/register test/**/*.ts",
31
+ "test": "mocha --require ts-node/register --node-option=--loader=ts-node/esm --node-option=--experimental-specifier-resolution=node --config tsconfig.test.json test/**/*.ts",
32
+ "test:decrypt": "mocha --require ts-node/register --node-option=--loader=ts-node/esm --node-option=--experimental-specifier-resolution=node --config tsconfig.test.json test/Utilities/HelperTest.ts --grep \"^Decrypt \"",
32
33
  "htmltest": "mocha-headless-chrome -f test/Viewer/viewer.html"
33
34
  },
34
35
  "repository": {
@@ -80,4 +81,4 @@
80
81
  "parse-color": "^1.0.0",
81
82
  "ts-event-bus": "^4.2.0"
82
83
  }
83
- }
84
+ }