Tridi v2 — Basic usage

Looking for older version? Read Tridi v1 documentation here

Basic Tridi viewer with minimum configuration. Supports mouse dragging and touch events. Loads all images immediately.

Required parameters:

  • element - element for Tridi to use as a base container. Can be one of the following:
    • id or class of the element as a string (#tridi-basic, .tridi-basic etc.)
    • DOM element (e.g. document.querySelector('.tridi-container'))
  • location - path to images folder as a string without a trailing slash (e.g. './images)
  • format - file resolution (e.g. 'jpg')
  • count - number of images to use

In this configuration Tridi assumes images are named by non-padded numbers from 1 to n (e.g. 1.png, 2.png etc.) and located in the folder specified as location property. You can also pass custom array as image source.

Code

HTML

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

JavaScript

const tridiInstance = Tridi.create({
  element: '#tridi-basic',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
});

tridiInstance.load();

See API documentation for all available options or CSS styling for a minimum viable stylesheet.

« Back to main page