Tridi — Basic usage

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

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