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:

$("#selector").jfancytile();

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

$("#selector").jfancytile({
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