jFancyTileTile shifting image viewer

Marcofolio.net

Demo 1 - Default options

  • Poisonous Frog
  • Dangerous Shark
  • White Tiger
  • Red Spitting Cobra
  • Small Spider

Demo 2 - Custom options

  • Green Demoiselle
  • Small Insect
  • Baby Bug
  • Colourful Bug
  • Red Dragonfly

jFancyTile is a jQuery plugin to show a slideshow in a beautiful, mosaic kind of way. It's very dynamic and easy to use. Make sure you check out the article, download the source and learn how it works!

Options / 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:

$("#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!

Good things about this plugin:

  • Easy to use (just include the needed CSS en JS files and change the HTML)
  • Auto-fits (Takes the size of the biggest image and uses that as the container size)

Bad:

  • CPU intense (loads of DOM creation and animation makes it heavy for slow computers)