description
Used to display some boxes in an area, others will come from outside with a sliding effects.
Full customizable, this plugin can be used in many situation. (photo gallery, articles random list, ...).
Currently tested on Firefox 3.6, IE8 and Opera.
There's a bug on Chrome, seem to come from outerWidth(true) jQuery method who return a wrong value.
Git repository
git clone git://github.com/zazabe/qbox.git
Instantiation
Some CSS is required, defining box area and boxes size.
javascript:
$('#area').qbox();CSS:
#area {
width: 450px;
height: 450px;
position: relative;
overflow: hidden;
}
#area .box {
width: 150px;
height: 150px;
}Methods
// animation action
$('#box').qbox().pause(); //pause animation
$('#box').qbox().resume(); //resume animation
$('#box').qbox().isRunning(); //true if animation is playing
$('#box').qbox().init(); //reinitialize the box matrix
//debug method
$('#box').qbox().showOutsidePositions(); //display outside position with box
$('#box').qbox().switchOutsidePositionsDisplay(); //turn the debug view off/on
Options
$('#box').qbox({
slide: {
effect: 'linear',
duration: 500,
from: 'all', // sliding direction => all, top, right, bottom or left
by: 'random', // sliding position order => random, asc or desc
custom: null // custom slide position function
// => function(){//this = qbox instance} (override slide.by)
},
box: {
selector: 'li', // box jQuery selector
rows: 3, // row number
cols: 3 // col number
},
qtime: {
interval: 2, // step number before sliding
step: 1000, // step duration in ms
running: true // sliding is running by default
}
});