How to make use of it:

1. To get started, embrace the JavaScript tiles.js after loading the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="pub/js/tiles.js"></script>

2. Create a container on which you wish to render the tile grid.

<div id="example"></div>

3. Initialize the plugin.

const myExample = new Tiles({
      container: 'example'
})

4. Add tiles to the grid. All attainable attributes:

myExample.addTile({ 
  title: 'jquery',
  img_src: '/path/to/image',
  hover_color: '#222',
  clickLink: '#',
  alt_img: '/path/to/another/image',
  click_callback: function(tile){},
})

5. All optionally available settings to customize the tile grid.

const myExample = new Tiles({

      // required
      container: 'example',

      // width in px
      width: 100,

      // height in px
      height: 100,
      
      // enable animation on hover
      animate: true,

      // zoom factor
      animate_factor: 1.05,

      // shows color gradient around each tile
      color_cycle: false,

      // enable/disable draggable
      nodrag: false,

      // space between tiles
      tile_gap: 30,

      // number of tiles per row
      num_horizontal: 2,

})

6. Shuffle the tiles.

myExample.shuffle();

7. Sort the tiles.

myExample.sort();

8. Flip the tiles. Note that the tiles will need to have another picture.

myExample.flip(tileid);

9. Enable/disable the tiles.

// disable
myExample.disable(tileid);
myExample.disableAll();

// enable
myExample.enable(tileid);
myExample.enableAll();

Draggable Sortable Tile Grid Plugin, tiles.js Github

See Demo And Download