jQuery Slidious

Let's assume you have a few hours to kill, while your girlfriend takes an exam. What would you do? If "develop a jQuery plugin" was the first thing that came to your mind, you should absolutely read this article. If not... well, you also might want to take a look.

jQuery Slidious is a plugin which transforms a list of links into a fancy, ajaxified website with slide-like scrolling effects. The contents of every provided link are preloaded and put into their own slide. The pages are positioned in a chessboard-like manner, where the side lengths of the board resembles the biggest position.

Positions on the board are assigned by html attributes. data-x defines the relative x-position on the board, where 1 equals one screen width. Accordingly the data-y attribute defines the y-position on the board. Slidious finds the biggest possible position and creates a container with the required maximum size.

The links can be defined inside any kind of container. Like this for example:

<div id="menu">
  <a href="page-1.html" data-x="0" data-y="0">Link 1</a>
  <a href="page-2.html" data-x="2" data-y="3">Link 2</a>
  <a href="page-3.html" data-x="5" data-y="2">Link 3</a>
  <a href="page-4.html" data-x="4" data-y="1">Link 4</a>
</div>

You can initialize Slidious by running .slidious() on the container. This will start the plugin. It will search for the biggest position and create a board of slides which resembles the positions, that you defined through the data-attributes.

  $('#menu').slidious();

In this example the result will look like this:

[1][0][0][0][0][0]
[0][0][0][0][4][0]
[0][0][0][0][0][3]
[0][0][2][0][0][0]

0 stands for an empty space and 1-4 stand for the corresponding pages with the same number of the menu defined above. Slidious has various configuration options and callbacks, which you can use to customize your Slidious experience.

For more details check out the repository on Github or the demo below.