jQuery Image Tile Plugin | Joe Wegner

As we've learned in the past, when I get bored I like to build fun little jQuery plugins. I don't know why I do this - I don't have any immediate need, but I suppose I just think it's fun and possibly useful to other people. Anyways, I was in a similar situation today, and decided to build another image animation plugin. It doesn't serve any true functionality, aside from being a pretty cool design that would look good on many websites. Get an in-depth view on the details of how it works, and how you can extend it after the break. View the demo, here!

At the very base usage, all you need is jQuery and an image. The plugin is smart enough to figure out the size and position of the image you're working with, and it automatically defaults to make a 10x10 grid over your image. To get it running at the very base level, your code should 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>

That will put a 10x10 grid of white tiles over your image, and randomly fade them in and out. It's a pretty cool effect, and just the simple base like that should work in most cases. However, I've built in some options so that you can override the defaults. The options are:

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 <div> that will be created over the image. Defaults to jquery_tile_div
maxOpacity -> Integer, the maximum opacity you want applied to any tile

And to load in those options, you simply modify your javascript to look like this:

$("#image").imageTile({
    rows: 5,
    columns: 10,
    animationTime: 600,
    newTilesTime: 300,
    tilesAtATime: 10,
    backgroundColor: "blue",
    className: "dontOverrideTiles",
    maxOpacity: 0.4

});

And that's it! The source is hosted on Github, so feel free to grab it from there, make any changes, or simply look at it and find all the awful parts of my code. If you have any issues or ideas, feel free to leave them in the comments or on the Github issue tracker. View the demo, here!

jQuery Image Tile Plugin09 April 2012