Respringboard.js jQuery Plugin

 
 
 

Recently I had the need to recreate the clever content reveal layout used in the new iTunes 11 and the Google images design, there didn't appear to be anything in the jQuery community that could do the job and the approaches used by Google and iTunes were too heavyweight for what I was looking for. It was time to hit the drawing board and build a plugin for myself.

Introducing Respringboard.js

The result is Respringboard.js which is up on Github right now, named after one of the first appearance of this kind of design on the iOS app Springboard with one huge difference, it's completely responsive and adjusts to the size of the browser window making it prefect for desktops or mobile devices alike.

Respringboard

Checkout the live demo

The idea is that you create boxes of images or HTML of any width and height, when the box is clicked it will show further information about the item in a reveal directly underneath the box, that reveal could load a page with an ajax call or load some hidden inline HTML. The reveal will respond to the size of the browser window and will automatically reposition itself to make sure it is always under the clicked box. As with most jQuery plugins there are plenty of options and methods to customise to your hearts content.

If you want to use Respringboard.js checkout the lab for documentation and everything you need to get going or fork it on github.