Options

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

Appearance

startPanel (1)

• Set the starting panel
• If hashTags option is true and a hash tag is present in the URL, it will override this value.

reducedSize (0.8)

• Sets the fractional size of non-current panels.
• The 0.8 is equivalent of 80% width of the current panel.
• Set this to 1 to keep the MovingBoxes contents from resizing.

fixedHeight (false)

• If true, the slider height will be set to max panel height
• If false, the slider height will auto adjust to match the current panel height.

Behaviour

speed (500)

• Sets the animation time, in milliseconds, to switch between panels.
• This value must be a number and reasonably fast.

initAnimation (true)

• If true, MovingBoxes will start from the first panel and animate to the starting panel (or panel set by the hash).
• If false, MovingBoxes will initialize with the starting or hash set panel visible.

hashTags (true)

• If true, hash tags are enabled and will update the URL after every change.
• If false, hash tags will not be updated.

wrap (false)

• If true, the panel will "wrap" around to the first panel, giving it the appearance of having infinite panels.
• If false, MovingBoxes will stop at the first and last panel, and hide (adds class from disabled option) the navigation arrows.
• In MovingBoxes older than v2.2, this option would rewind the panels.

buildNav (false)

• If true, navigation links will be added to allow navigation to specific panels.
• The navigation links use the navFormatter function below to allow modifying the navigation link content.
• If false, no navigation links are added.

navFormatter (null)

• This function is called when the buildNav option is true.

• If left as null the navigation links will be the panel number (starting from one).

• This function returns the navigation text/html for each panel. Here are some examples:

  All bullets:

   // Every link is a bullet
   navFormatter : function(){ return "●"; }

  Named tabs:

   navFormatter : function(index, panel){
       // function which gets nav text from inside the panel header span
       return ['alice', 'bertha', 'claudia', 'denise'][index-1];
   }

  Text from panel content:

   navFormatter : function(index, panel){
       // function which gets nav text from inside the panel header span
       return panel.find('h2 span').text();
   }

  Thumbnail images:

   navFormatter : function(index, panel){
       // thumbnails - you may need to move the navigation panel using css
       return '<img src="thumb_slide_' + ['alice', 'bertha', 'claudia', 'denise'][index-1] + '.jpg">';
   }

easing ('swing')

• This value determines how the panel is brought into view.
• Any value other than "linear" or "swing" requires the jquery easing plugin to be loaded.

Selectors & classes

currentPanel ('current')

• Current panel class name
• Don't forget to update the css

tooltipClass ('tooltip')

• When the navigation text is hidden using a negative text-indent:
  • This class is added to the navigation link, and
  • The link text is added into the link title attribute

disabled ('disabled')

• This class is added to the navigation arrows:
  • The left arrow gets this class when on first panel
  • The right arrow gets this class when on last panel.

Callbacks

• See the Events documentation for more details.

initialized (null)

• This callback is run when MovingBoxes has completed initialization.

initChange (null)

• This callback is run upon panel change initialization.

beforeAnimation (null)

• This callback is run just before any animation occurs.

completed (null)

• This callback is run after animation completes.

Alternate/deprecated options

• These options have been deprecated as initialization options, but are still used to modify the overall MovingBoxes width and panel width dynamically (i.e. on window resize).

width

• Set the overall width of movingBoxes (not including navigation arrows)
• This width must be set as pixels and not a percentage, but to make MovingBoxes a percentage of window width, see this demo.

panelWidth

• This option will accept both fractions and pixel widths:
  • Any fraction <= 2; so setting panelWidth: 0.5 will make the panels 50% of the overall width (or width option setting, if set).
  • Any value > 2 will be evaluated as a pixel width of the panel, so panelWidth: 300 will set the panel width to 300px.
• See the width option above to see how to use this value to dynamically resize MovingBoxes to match the window size.

---

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