Tridi v2 — Dynamic image replacement

Looking for older version? Read Tridi v1 documentation here

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

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

tridiInstance.load();

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

const switchColor = function(color) {
  tridiInstance.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