A jQuery tile shifting image viewer plugin

This jQuery plugin called jFancyTile is a tile shifting image viewer. It allows you to tranform any list with images to a beautiful tile shifting photo presenter.

Take note this plugin is pretty CPU intense and works best when a low rowCount and columnCount is used on relatively small images.

How to use


Make sure your HTML looks like the following:

  • Title 01
  • Title 02

The alt attribute from each image will be used to display as the title on top.

Next, include the needed CSS and jQuery files to your HTML head:

Now you’re ready to use the plugin! Feel free to change the CSS file to your needs. To use the default options, simply call the plugin on the selector:


For more customization, you can change the following input variables (shown are the defaults):

inEasing: "swing",    // Easing animation of tiles flying IN
outEasing: "swing",   // Easing animation of tiles flying OUT
inSpeed: 1000,        // Animation speed of tiles flying IN
outSpeed: 1000,       // Animation speed of tiles flying OUT
rowCount: 8,          // Total number of rows
columnCount: 13,      // Total number of columns
maxTileShift: 3       // Max amount of positions a tile can shift


That’s all there is to it! You can use the jQuery Easing Plugin for more variations of inEasing and outEasing.


How it works


Now for the most interesting part: How does this plugin actually work?

  1. Step 1 – Analyze all the images, get their alt attribute, dimensions and src.
  2. Step 2 – Create a container by using the biggest image dimensions.
  3. Step 3 – Remove the list from the HTML.
  4. Step 4 – Create the navigation buttons and apply them to the container.
  5. Step 5 – Calculate the number of tiles we need to create based on the rowCount and columnCount.
  6. Step 6 – Create the tiles by creating a div for each tile.
  7. Step 7 – Set the background-image for each tile using the image supplied. Use background-position to shift the image to the correct position.
  8. Step 8 – Append the title to the collection of tiles.
  9. Step 9 – Add functionality to animate the tiles to a random position and fade out.
  10. Step 10 – Add functionality to animate the tiles to their desired position and fade in.

Leave a comment