Draggable Sortable Tile Grid Plugin In jQuery - tiles.js
File Size: | 744 KB |
---|---|
Views Total: | 1066 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.