Extending the jQuery Rambling Slider
November 30, 2011
This post was originally published in the Rambling Labs Blog on November 30, 2011.
One of the core features added in version 0.2.0 of the jQuery Rambling Slider is the ability to customize the transitions between images, between flash elements and between an image and a flash element.
As it is described in the Adding and Overriding Transitions page in the project’s wiki, in order to do this you have to something like this:
$(window).load(function(){
$('#slider').ramblingSlider({
imageTransitions: {
/* Add a 'fadeInSlices' transition */
fadeInSlices: function() {
/* ... */
},
/* Override the 'sliceUpRight' transition */
sliceUpRight: function() {
/* ... */
}
/* ... */
},
flashTransitions: {
/* Same format */
},
imageFlashTransitions: {
/* Same format */
}
});
});
In the 'fadeInSlices'
context you will have a lot of helper functions available in the 'this'
object to aid you with the new transitions. The helper functions are:
createSlices
. Returnssettings.slices
number of slices, ready to apply any animation.createBoxes
. Returnssettings.boxRows * settings.boxCols
number of boxes, ready to apply any animation.getOneSlice
. Returns one slice, ready to appy any animation.animateFullImage
. Expects ananimationSetUp
callback, which will have the full image jQuery element asthis
, and that should execute any action that needs to be done before running the animation and then return the parameters to be passed to the jQueryanimate
method.animateSlices
. Expects ananimationSetUp
callback, which will have each slice jQuery element asthis
, and that should execute any action that needs to be done before running the animation and then return the parameters to be passed to the jQueryanimate
method, and asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.animateBoxes
. Expects ananimationCallback
to be applied to the boxes, and asortCallback
to sort thesettings.boxRows * settings.boxCols
number of boxes. Also, passes thefinishedCallback
to theanimationCallback
function, expecting it to be raised when the whole animation is finished.slideUpSlices
. Expects only asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.slideDownSlices
. Expects only asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.slideUpDownSlices
. Expects only asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.foldSlices
. Expects only asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.fadeSlices
. Expects only asortCallback
, with all the slices jQuery collection asthis
and that is expected to sort thesettings.slices
number of slices.rainBoxes
. Expects asortCallback
, with all the boxes jQuery collection asthis
and that is expected to sort thesettings.boxRows * settings.boxCols
number of boxes, and agrow
boolean to determine if using the fade or grow box effect.
That way, if you want to animate slices, you can sort them in your own way, and set up the animation for each of them with something like this:
imageTransitions: {
fadeInSlices: function() {
this.animateSlices(function(){
this.css('opacity', '0');
return {opacity: '1'};
},
function() {
return this.reverse();
});
}
}
Pretty cool huh? I hope to be adding more functionality on top of this. Maybe moving the transition definitions into a separate file.
Enjoy!