Submit your widget
HomeSlideshow & ScrollerA jQuery tile shifting image viewer plugin

A jQuery tile shifting image viewer plugin

Created 14 years ago   Views 9966   downloads 1576    Author n/a
A jQuery tile shifting image viewer plugin
View DemoDownload
95
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">
   <ul>
      <li><img src="images/img01.jpg" alt="Title 01" /></li>
      <li><img src="images/img02.jpg" alt="Title 02" /></li>
      <!-- More images -->
   </ul>
</div>

 

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:

<head>
   <link rel="stylesheet" type="text/css" href="css/jfancytile.css"/>
   <script type="text/javascript" src="js/jquery.jfancytile.js"></script>
 
</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.

 

You might also like