Usage

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

Setting up elements that resize

• MovingBoxes is setup so it only resizes the panel itself.

• All content inside the panel that is set using a percentage, or em (for fonts) will resize with the panel. If you look in the demo.css file, you'll see that the image dimensions are set as a percentage.

  /* panel images */
  .mb-inside img { width: 100%; }

• Any content inside the panel that is set using an exact pixel size will not resize.

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 | Options | Usage | Events | Change | Credits