Submit your widget

A jQuery tile shifting image viewer plugin

Created 13 years ago   Views 9750   downloads 1498    Author n/a
A jQuery tile shifting image viewer plugin
View DemoDownload
Share |

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:

<div id="selector">
      <li><img src="images/img01.jpg" alt="Title 01" /></li>
      <li><img src="images/img02.jpg" alt="Title 02" /></li>
      <!-- More images -->


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:

   <link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
   <script type="text/javascript" src="js/jquery.jfancytile.js"></script>


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.