Looking for older version? Read Tridi v1 documentation or how to upgrade to version 2.x
| Name | Type | Default parameter | Required? | Description |
|---|---|---|---|---|
element |
string |
undefined |
yes | ID or class of HTML element to be used by Tridi |
images |
'numbered' | Array<string> |
'numbered' |
no | Source of images to be used by Tridi |
format |
string |
undefined |
yes for images: 'numbered' |
Image file resolution (e.g. jpg) |
location |
string |
undefined |
yes for images: 'numbered' |
Path to images folder |
count |
number |
undefined |
yes for images: 'numbered' |
Number of images in the series |
draggable |
boolean |
true |
no | Enable / disable mouse drag events |
hintOnStartup |
boolean |
false |
no | Enable / disable hint on startup |
hintText |
string |
null |
no | Enable / disable startup hint text |
lazy |
boolean |
false |
no | Enable / disable lazy loading |
autoplay |
boolean |
false |
no | Enable / disable autoplay |
autoplaySpeed |
number |
50 |
no | Adjust autoplay speed |
stopAutoplayOnClick |
boolean |
false |
no | Stop autoplay if user clicks on container |
stopAutoplayOnMouseenter |
boolean |
false |
no | Stop autoplay if user hovers over container |
resumeAutoplayOnMouseleave |
boolean |
false |
no | Resume autoplay if user moves mouse cursor away from container |
resumeAutoplayOnMouseleave |
number |
0 |
no | Delay before resuming autoplay |
resumeAutoplayDelay |
number |
0 |
no | Delay before resuming autoplay |
passive |
boolean |
true |
no | Sets passive: true on mousewheel and touch events |
spinner |
boolean |
false |
no | Enable / disable loading spinner |
touch |
boolean |
true |
no | Enable / disable touch support |
mousewheel |
boolean |
false |
no | Enable / disable mousewheel support |
keys |
boolean |
false |
no | Enable / disable keyboard support |
focusOnHintClose |
boolean |
false |
no | Enable / disable automatic focus on main image when startup hint is closed |
inverse |
boolean |
false |
no | Swap image rotation direction. Affects mouse drag, mousewheel and touch. |
dragInterval |
number |
1 |
no | Adjust rotation speed for mouse drag events |
touchDragInterval |
boolean |
2 |
no | Adjust rotation speed for touch events |
mouseleaveDetect |
boolean |
false |
no | If true, active drag event will stop whenever mouse cursor leaves Tridi container |
Options below can be updated via Tridi.update method.
| Name | Type | Default parameter | Required? | Description |
|---|---|---|---|---|
images |
'numbered' | Array<string> |
'numbered' |
no | Source of images to be used by Tridi |
format |
string |
undefined |
yes for images: 'numbered' |
Image file resolution (e.g. jpg) |
location |
string |
undefined |
yes for images: 'numbered' |
Path to images folder |
count |
number |
undefined |
yes for images: 'numbered' |
Number of images in the series |
All methods require class initialization before they can be used:
new Tridi({ ...options }).load();| Name | Description |
|---|---|
load() |
Load Tridi container after Tridi class initialization |
update(options, syncFrame?) |
Update Tridi container with updatable options. Use syncFrame to synchronize frames between image sequences. See Dynamic image replacement |
autoplayStart() |
Start autoplay sequence. See custom controls |
autoplayStop() |
Stop autoplay sequence. See custom controls |
next() |
Load next image in the sequence. See custom controls |
prev() |
Load previous image in the sequence. See custom controls |
Custom callback functions can be attached to the following lifecycle events. Unless stated otherwise, callbacks are executed after the event occurs.
| Name | Description |
|---|---|
onViewerGenerate |
Viewer container is generated, i.e. prepared for loading images and attaching events |
onViewerImageGenerate |
First viewer image is initially loaded |
onViewerImageUpdate |
Viewer image is updated |
onHintShow |
Hint on startup is shown |
onHintHide |
Hint on startup is hidden after user interaction |
onLoadingScreenShow |
Loading spinner is shown |
onLoadingScreenHide |
Loading spinner is hidden |
onImagesPreload |
All source images are preloaded |
onAutoplayStart |
Autoplay starts or resumes |
onAutoplayStop |
Autoplay stops |
onNextMove |
Next image is loaded (obeying inverse option) |
onPrevMove |
Previous image is loaded (obeying inverse option) |
onNextFrame |
Next image is loaded following the order in the image source (indifferent to inverse option) |
onPrevFrame |
Previous image is loaded according to the order in the image source (indifferent to inverse option) |
onDragStart |
Image rotation sequence (dragging) starts |
onDragEnd |
Image rotation sequence (dragging) ends |
onLoad |
All initial loading steps (container setup, attaching events) were executed. Note that this may fire before all source images are preloaded |
onUpdate |
Container update finished according to specified configuration. Note that this may fire before all source images are preloaded |
TypeScript definitions are also available. See tridi.min.d.ts.