Tridi — API options, methods, events

Options

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

Updatable options

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

Methods

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

Events

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.

« Back to main page