Image Tiling Plugin
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Readme.md
jquery.imageTile.js Remove some more console logs Apr 9, 2012

Readme.md

jQuery Image Tiles

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

Demo

Use

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:

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.imageTile.js"></script>
    <script type="text/javascript">
         $(window).load(function() {
             $("#image").imageTile();
         });
    </script>
</head>
<body>
    <img src="image.jpg" id="image" />
</body>
</html>

Options

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:

$("#image").imageTile({
    maxOpacity: .7,
    rows: 8,
    columns: 15
});

Contributors

License

This plugins is licensed under the Apache License.