Tridi — Custom events

This docs is for Tridi v1.x. Read Tridi v2 documentation or how to upgrade to version 2.x

Open the console in your browser's developer tools to see events in action.

Custom callbacks can be attached to majority of Tridi lifecycle events.

Callbacks passed to Tridi are executed after the event occurs.

See full list of available events here



<div id="tridi-events"></div>


new Tridi({
  element: '#tridi-events',
  location: '../images/white',
  format: 'jpg',
  count: 36,
  hintOnStartup: true,
  lazy: false,
  hintText: ' ',
  onViewerGenerate: function() {
    console.log('Viewer generated');
  onViewerImageGenerate: function() {
    console.log('Viewer image generated');
  onViewerImageUpdate: function() {
    console.log('Viewer image updated');
  onImagesPreload: function() {
    console.log('Images preloaded');
  onHintShow: function() {
    console.log('Hint on startup shown');
  onHintHide: function() {
    console.log('Hint on startup hidden');
  onLoadingScreenShow: function() {
    console.log('Loading screen shown');
  onLoadingScreenHide: function() {
    console.log('Loading screen hidden');
  onNextMove: function() {
    console.log('Next move');
  onPrevMove: function() {
    console.log('Previous move');
  onNextFrame: function() {
    console.log('Next frame');
  onPrevFrame: function() {
    console.log('Previous frame');
  onLoad: function() {
    console.log('Tridi loaded');
  onUpdate: function() {
    console.log('Tridi updated');
  onDragStart: function() {
    console.log('Drag started');
  onDragEnd: function() {
    console.log('Drag ended');

« Back to main page