jQuery Plugin To Create Infinite Tiled Wall - Infinite Drag

Infinite Drag is a simple but customizable jQuery & jQuery UI plugin which helps you create a endlessly draggable wall interface with infinite tiles.

How to use it:

1. Create a container for the infinite wall interface.

<div id="wall"></div>

2. Load the jQuery Infinite Drag plugin and other JavaScript resources at the end of the html document.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.infinitedrag.js"></script>

3. Initialize the plugin on the 'wall' container and specify the 'draggable' & 'tile' options.

var infinitedrag = jQuery.infinitedrag("#wall", {
      // jQuery UI draggable options here
    }, {
      // tile options here
    }
);

4. Apply your custom styles to the tiles.

#wall ._tile {
  ...
}

5. All default 'tile' options.

// classname for tiles
class_name: "_tile",

// tile width
width: 100,

// tile height
height: 100,

// start column
start_col: 0,

// start row
start_row: 0,

// custom ranges of rows and columns
range_col: [-1000000, 1000000],
range_row: [-1000000, 1000000],

// callback
oncreate: function($element, i, j) {
  $element.text(i + "," + j);
}

6. API methods.

// Returns whether the wall can be dragged.
var disabled = wall.disabled();

// Disables dragging of the wall.
wall.disabled(true);

// Enables dragging of the wall.
wall.disabled(false);

// Centers the tile at (9, 0) in the viewport.
wall.center(9, 0);

---

This awesome jQuery plugin is developed by ianli. For more Advanced Usages, please check the demo page or visit the official website.