Image Tiling Plugin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

jQuery Image Tiles

A jQuery plugin for adding a tile animation to any image.



It's very easy to run this plugin with the basic features. All you need is an image and jQuery loaded. So your HTML might look like this:

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src="jquery.imageTile.js"></script>
    <script type="text/javascript">
         $(window).load(function() {
    <img src="image.jpg" id="image" />


We also offer some options that you can override to better fit your needs:

  • rows ~ Integer The number of rows in the grid. Defaults to 10
  • columns ~ Integer The number of columns in the grid. Defaults to 10
  • animateTime ~ Integer or String The time for the fade effect to finish on each tile. This accepts a millisecond value, or a jQuery timing string such as "slow". Defaults to 800
  • newTilesTime ~ Integer How often new tiles will be chosen to fade, in milliseconds. Defaults to 400
  • tilesAtATime ~ Integer The number of tiles to fade at the same time. Defaults to 5
  • backgroundColor ~ String The color of the tiles. Accepts any valid CSS value, such as "white" or "#C1C1C1". Defaults to "white"
  • className ~ String The class name to give the
    that will be created over the image. Defaults to jquery_title_div
  • maxOpacity ~ Integer The maximum opacity to apply to any tile. Defaults to 1 (100% Opacity)

You apply those options using a standard options object, like so:

	maxOpacity: .7,
	rows: 8,
	columns: 15



This plugins is licensed under the Apache License.