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)
• Any of the following methods will give the same result:

External Link with callback (optional)

HTML

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

Method #1

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

Method #2

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

Set panel using element ID or class

• Note: As of version 2.2.14, you can now directly target the element inside the slider

Go to panel containing "#myTarget":

// target id of the panel or any element inside the panel
$('#slider').getMovingBoxes().change("#myTarget");

Go to panel containing ".banana"

// or target class, callback is optional
$('#slider').movingBoxes(".banana", function(slider){
  // callback stuff here
});

• As of version 2.3.2, you can pass a jQuery object to this function.

var target = $('img.funny-cat1');
$('#slider').data('movingBoxes').change( target );

External Controls

$('#slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('#slider').data('movingBoxes').goBack();    // go back one slide (if possible)
$('#slider').data('movingBoxes').change(num); // go to slide num (num can be a number, jQuery selector or jQuery object)

Formatting Navigation Link Text

Bullets only

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

Text from inside the panel header

// 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(); }
});

Custom element

// Example 3 - navFormatter ** functionality added in v2.2.9 **
$('#slider').movingBoxes({
  buildNav     : true,
  navFormatter : function(index, panel){
    return {
      'class'  : 'tooltip',
      'data-x' : 'link to panel ' + index,
      'title'  : ['Tooltip #1', 'Tooltip #2', 'Tooltip #3' ][index-1],
      'href'   : '#', // don't forget it's a link! without this you don't get pointy finger thingy
      'html'   : '<span>' + index + '</span>'
    };
  }
});

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