Tridi — Basic usage

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

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

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

« Back to main page