Tridi — Custom events

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

Code

HTML

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

JavaScript

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');
  }
}).load();

« Back to main page