Tridi — Dynamic image replacement

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