API and documentation

Quick Navigation

Getting started

To get started with tiles.js, you’ll need to include jQuery and tiles.js in your HTML source as shown below:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- first load jQuery -->
    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- then load tiles.js -->
    <script defer type="text/javascript" src='https://hhc97.github.io/tiles-js/pub/js/tiles.js'></script>
    <!-- then load a script that depends on tiles.js -->
    <script defer type="text/javascript" src='js/examples.js'></script>
</head>

By default, tiles.js assigns itself to the global Tiles variable when loaded. If the Tiles variable is already in use, it will not be overwritten.
Once loaded, you can get an instance of Tiles by calling its constructor:

const tiles = new Tiles({container: 'id'})

Note that you must create a new instance of Tiles for each section of tiles that you want to create, or there could be unintended behavior.

Constructors

There is only one constructor required to use tiles.js, and it has one required value, with a few other optional parameters. A constructor call with every possible option is shown below:

new Tiles({
    container: 'tile_container_div_id',
    width: 100,
    height: 100,
    animate: true,
    animate_factor: 5,
    color_cycle: true,
    nodrag: true,
    tile_gap: 30,
    num_horizontal: 2
})

The parameters are provided in the form of a javascript object, so optional parameters can be left out if desired.
Required parameters

Optional parameters

API methods

Once you have created an instance of Tiles, these are the API methods that can be called and their available options:

Back to top

© Copyright 2021 Haocheng Hu