Draggable Sortable Tile Grid Plugin In jQuery - tiles.js

tiles.js is a jQuery layout plugin that enables users to easily display content in the form of 'tiles', which are customizable rectangular blocks which can hold content of different types, such as images, text, links, etc.

Developers have the option of sorting and customizing the tiles, including things like color, size, position, opacity, etc.

End users will be able to interact with the content in the tiles, depending on what developers have put there.

There could also be things like customizable buttons which can be mapped to different functionality.

Developers would use this instead of writing their own code because its often frustrating to get the CSS and HTML code just right to align different blocks in the way that you intend to.

How to use it:

1. To get started, include the JavaScript tiles.js after loading 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 want 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 possible attributes:

• title: title of the tile
• img_src: background image of the tile
• hover_color: border color on hover
• clickLink: URL of the tile
• alt_img: alternative image on hover
• click_callback: callback function

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

5. All optional 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 must have an alternative image.

myExample.flip(tileid);

9. Enable/disable the tiles.

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

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

---

This awesome jQuery plugin is developed by hhc97. For more Advanced Usages, please check the demo page or visit the official website.