Events

Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits

Event Hooks (callback name)

Events

• initialized.movingBoxes (initialized) Triggered when MovingBoxes has completed its initialization. It may occur before all animation has completed (hash tag updating).
• initChange.movingBoxes (initChange) Triggered immediately after the script is called to change the panels. No checks have been done at this point. An additional variable of the targeted panel number is available - see the examples below.
• beforeAnimation.movingBoxes (beforeAnimation) Triggered before the movingBoxes panels animate. An additional variable of the targeted panel number is available - see the examples below.
• completed.movingBoxes (completed) Triggered after the panels have completed their animations (sliding and resizing).

Binding to events

$('.slider').bind('initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes',function(e, slider, tar){
  var txt = 'MovingBoxes with ID #' + slider.$el[0].id + ' has just triggered ' + e.type +
    ' is now on panel #' + slider.curPanel + ', and the targeted panel is ' + tar;
  alert( txt );
});

Using a callback function (added to the MovingBoxes initialization options):

$('.slider').movingBoxes({
  initChange      : function(e, slider, tar){
    alert( 'MovingBoxes was called to change panels, the targeted panel is #' + tar );
  },
  beforeAnimation : function(e, slider, tar){
    alert( 'You are about to switch from panel #' + slider.curPanel + ' to panel #' + tar);
  },
  completed       : function(e, slider, tar){
    alert( 'Now on panel #' + tar );
  }
})

Callback/Event Arguments

(assuming you used slider as the variable name inside the function function(e, slider, tar){})

• slider.curPanel Current active panel (enlarged and centered). Standard based index (e.g. first panel is number 1, second is number 2). This value is not updated with the targeted panel until the completed event is called.
• slider.totalPanels Number of panels inside that slider.
• slider.$el jQuery object of the entire movingBoxes slider - this is the movingBoxes target when the script was initialized.
• slider.$panels jQuery object of all of the panels. To target the current panel, use slider.$panels.eq( slider.curPanel - 1 ).
• slider.options.{name} Access any of the options this way. Do not try to set any of the options in this manner because it may break the movingBoxes slider.

Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits