Tridi — Dynamic image replacement

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

Each Tridi instance exposes update(options, syncFrame) method which makes it possible to update image source on the fly.

update(options, syncFrame)

Acceptable parameters:

  • options (required) - object containing options to be passed. Updatable options are:
    • images - image source ('numbered' or image array)
    • imageFormat - image format (file resolution)
    • imageCount - image count if using 'numbered' as image source
    • imageLocation - folder containing images to be used
  • syncFrame (optional, default: false) - if true, Tridi will sync frames between old and new image set for seamless switch effect

Code

HTML

<div id="tridi-dynamic"></div>
<div class="color-switch color-switch--white" title="Switch to white"></div>
<div class="color-switch color-switch--black" title="Switch to black"></div>
<div class="color-switch color-switch--red" title="Switch to red"></div>
            

JavaScript

var tridi = new Tridi({
  element: '#tridi-dynamic',
  imageLocation: '../images/white',
  imageFormat: 'jpg',
  imageCount: 36,
});

tridi.load();

var switchToWhiteBtn = document.querySelector('.color-switch--white');
var switchToBlackBtn = document.querySelector('.color-switch--black');
var switchToRedBtn = document.querySelector('.color-switch--red');

var switchColor = function(color) {
  tridi.update({
    location: '../images/' + color,
    format: 'jpg',
    count: 36,
  }, true);
}

// Click event support

switchToWhiteBtn.addEventListener('click', function() {
  switchColor('white');
});

switchToBlackBtn.addEventListener('click', function() {
  switchColor('black');
});

switchToRedBtn.addEventListener('click', function() {
  switchColor('red');
});

// Touch event support

switchToWhiteBtn.addEventListener('touchstart', function() {
  switchColor('white');
});

switchToBlackBtn.addEventListener('touchstart', function() {
  switchColor('black');
});

switchToRedBtn.addEventListener('touchstart', function() {
  switchColor('red');
});

« Back to main page