@3dweb/360javascriptviewer 1.8.38 → 1.8.39
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 +32 -29
- package/lib/JavascriptViewer.js +2 -16
- package/package.json +15 -17
- package/typings/JavascriptViewer.d.ts +348 -307
package/Readme.md
CHANGED
|
@@ -63,35 +63,38 @@ But if you have other filenames/locations for your 360 images, you can change t
|
|
|
63
63
|
# API
|
|
64
64
|
## Constructor
|
|
65
65
|
|
|
66
|
-
| property
|
|
67
|
-
|
|
68
|
-
| id
|
|
69
|
-
| mainImageId
|
|
70
|
-
| mainHolderId
|
|
71
|
-
| mainImageUrl
|
|
72
|
-
| totalFrames
|
|
73
|
-
| imageUrls
|
|
74
|
-
| firstImageNumber
|
|
75
|
-
| reverse
|
|
76
|
-
| speed
|
|
77
|
-
| inertia
|
|
78
|
-
| defaultProgressBar
|
|
79
|
-
|
|
|
80
|
-
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
|
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
66
|
+
| property | type | description | default |
|
|
67
|
+
|-----------------------------------|-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
|
|
68
|
+
| id | string | ID of the presentation created by 3dweb.io | jsv-image |
|
|
69
|
+
| mainImageId | string | ID of the image which is the base for all the frames. You can also use mainImageUrl if the path of the other files are different. | jsv-image |
|
|
70
|
+
| mainHolderId | string | ID of the div where the presentation runs in. | jsv-holder |
|
|
71
|
+
| mainImageUrl | string | URl of the first image, doesn't have to be in the document. Not needed when using imageUrls | |
|
|
72
|
+
| totalFrames | number | Amount of frames in the presentation, more images means smoother rotations. | 72 |
|
|
73
|
+
| imageUrls | string[] | Array of image urls, overrides totalFrames and imageUrlFormat | [] |
|
|
74
|
+
| firstImageNumber | number | After loading the presentation this is the first frame visible. | 1 |
|
|
75
|
+
| reverse | boolean | Invert the rotation direction when dragging. | false |
|
|
76
|
+
| speed | number | Speed of rotating. -199 to 100 | 80 |
|
|
77
|
+
| inertia | number | Delay when stop dragging. | 20 |
|
|
78
|
+
| defaultProgressBar | boolean | Disable the build in progress bar, use this when you have implemented your own loader or don't like this one. | true |
|
|
79
|
+
| defaultProgressBarColor | string | Change the color of the progress bar, can be hex of rgb. | rgb(0, 0, 0) |
|
|
80
|
+
| defaultProgressBarBackgroundColor | string | Change the background color of the progress bar, can be hex of rgb. | rgba(255, 255, 255, 0.5) |
|
|
81
|
+
| defaultProgressBarHeight | string | Change the height of the progress bar, can be any css value for height. | 5px |
|
|
82
|
+
| imageUrlFormat | string | Format for determining the filenames of the frames {filename}_xx.{extension} is the default ipod_x.jpg => ipod_1.jpg ipod_xx.jpg => ipod_01.jpg https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg | {filename}_xx.{extension} |
|
|
83
|
+
| extraImageClass | string | Add a class to all the images used in the presentation, separate multiple classes with a space. | empty |
|
|
84
|
+
| startFrameNo | number | Use this setting in combination with imageUrlFormat startFrameNo: 4 => first file is ipod_04.jpg | 1 |
|
|
85
|
+
| autoRotate | number | Use this setting for rotating the view at start. Rotation stops when user drags the model or another animation method is called. | 0 |
|
|
86
|
+
| autoRotateSpeed | number | Speed of autorotation. -199 to 100 | 1 |
|
|
87
|
+
| autoRotateReverse | boolean | Use this setting for changing the direction of the auto rotating. | 1 |
|
|
88
|
+
| enableImageEvents | boolean | Use this setting for enabling click pinch and wheel events on images. | 0 |
|
|
89
|
+
| zoom | boolean | Use this setting for enabling zoom functions. Zoom on wheel event or pinch. | 0 |
|
|
90
|
+
| zoomWheelSpeed | number | Change the speed of zooming with the mousewheel. | 50 |
|
|
91
|
+
| zoomMax | number | If zoom is enabled this is the max zoom factor. | 2 |
|
|
92
|
+
| stopAtEdges | boolean | Blocks repeating images after reaching last image. | 0 |
|
|
93
|
+
| autoCDNResizer | boolean | Set the query params height and width for use with an image resizer. | 0 |
|
|
94
|
+
| autoCDNResizerConfig | IAutoCDNResizerConfig | Config for adding query params to image urls. | 0 |
|
|
95
|
+
| enableChangeImageEvent | boolean | Enable changeImage event on rotation, could be CPU heavy | 0 |
|
|
96
|
+
| cursorConfig | ICursorConfig | Change the cursors for the presentation | |
|
|
97
|
+
| notificationConfig | InotificationConfig | Configure the default notifications | |
|
|
95
98
|
|
|
96
99
|
## Methods
|
|
97
100
|
- **start()**:Promise<void>
|