Usage

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

Updating the Slider (content added or removed)

Any options added inside the movingBoxes call will be ignored.

$('#boxes')
  // divs appended here, assuming you are using the DIV layout
  .append('<div><img src="images/3.jpg" /><h2>Heading</h2><p>A very short exerpt goes here</p></div>')
  .movingBoxes(); // update the slider - do not include options!

Methods

To get the MovingBoxes plugin object, use either of the following methods (they are equivalent):

// get data method
var mb = $('.slider').data('movingBoxes');
// get date via function
var mb = $('.slider').getMovingBoxes();

With the mb object you can then do any of the following:

Get current panel

• Panel number uses a standard index (starts count from one)
• Either of the following methods will give the same result:

var mb = $('.slider').getMovingBoxes();
// returns # of currently selected/enlarged panel
var panel = mb.curPanel;
// or use
var panel = mb.currentPanel();

Set current panel

• Panel number uses a standard index (starts count from one)
• Either of the following methods will give the same result:

External Link with callback (optional)

<a href="#" id="gotoPanel2">Panel 2</a>

$('#gotoPanel2').click(function(){
  // scrolls to 2nd panel, then runs callback function
  $('.slider').movingBoxes(2, function(slider){
    alert('done! now on slide #' + slider.curPanel); // callback
  });
});

// or use
$('#gotoPanel2').click(function(){
  var mb = $('.slider').getMovingBoxes();
  mb.currentPanel(2, function(slider){
    alert('done! now on slide #' + slider.curPanel); // callback
  });
});

External Controls

$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('.slider').data('movingBoxes').goBack();    // go back one slide (if possible)

Formatting Navigation Link Text

// Example 1 - add a bullet as the navigation link
$('.slider').movingBoxes({
  buildNav     : true,
  navFormatter : function(index, panel){ return "●"; } // bullet
})

// Example 2 - see index.html source (function which gets nav text from span inside the panel header)
$('.slider').movingBoxes({
  buildNav     : true,
  navFormatter : function(index, panel){ return panel.find('h2 span').text(); }
})

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