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. Returns settings.slices number of slices, ready to apply any animation.
• createBoxes. Returns settings.boxRows * settings.boxCols number of boxes, ready to apply any animation.
• getOneSlice. Returns one slice, ready to appy any animation.
• animateFullImage. Expects an animationSetUp callback, which will have the full image jQuery element as this, 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 jQuery animate method.
• animateSlices. Expects an animationSetUp callback, which will have each slice jQuery element as this, 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 jQuery animate method, and a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• animateBoxes. Expects an animationCallback to be applied to the boxes, and a sortCallback to sort the settings.boxRows * settings.boxCols number of boxes. Also, passes the finishedCallback to the animationCallback function, expecting it to be raised when the whole animation is finished.
• slideUpSlices. Expects only a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• slideDownSlices. Expects only a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• slideUpDownSlices. Expects only a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• foldSlices. Expects only a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• fadeSlices. Expects only a sortCallback, with all the slices jQuery collection as this and that is expected to sort the settings.slices number of slices.
• rainBoxes. Expects a sortCallback, with all the boxes jQuery collection as this and that is expected to sort the settings.boxRows * settings.boxCols number of boxes, and a grow 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!