Adding and Overriding Transitions

You can add your custom image transitions, flash transitions and flash to image transitions to a slider upon initalization.

Adding transitions

To do this, you will need to specify one of the corresponding options, like this:

$(window).load(function(){
  $('#slider').ramblingSlider({
    imageTransitions: {
      newImageTransitionName: function() {
        /* ... */
      },
      otherTransition: function() {
        /* ... */
      }
      /* ... */
    },
    flashTransitions: {
      /* Same format */
    },
    imageFlashTransitions: {
      /* Same format */
    }
  });
});

You can then set your custom transition to be called with:

$('#slider').ramblingSlider('effect', 'newImageTransitionName')

Or just leave the default (random) and it will be used eventually.

Overriding transitions

To override any transition, just be sure that the name of the new transition is the same as the one you are trying to override. For example:

$(window).load(function(){
  $('#slider').ramblingSlider({
    imageTransitions: {
      boxRandom: function() {
        /* Override the default boxRandom transition */
      }
    }
  });
});

Available helpers

When the new transition functions added are called, they will have these functions available on this:

• 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 the slider and settings parameters, 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.
• fadeBoxes. 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.