Options

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

Sections: Appearance | Behaviour | Times | Selectors & Classes | Callbacks | Deprecated

Appearance

startPanel

• Set the starting panel.
• If hashTags option is true and a hash tag is present in the URL, it will override this value.
• This value can be a number (1 or "1")
• This value can be a jQuery selector ("#box2" or "a.internal-link") or jQuery object ($("#box2")) which can target any element within the panel.
• Default value is 1.
• NOTE: this is not a zero based index value. (So the first element is 1 not 0)

reducedSize

• 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.
• Default value is 0.8.

fixedHeight

• 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.
• Default value is false.

Behaviour

initAnimation

• 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.
• Default value is true.

stopAnimation

• If false, movingBoxes will continue to behave as it always has. Any attempt to navigation using arrows or the navigation panel will be ignored until the animation has completed.
• When true, movingBoxes will force the animation to complete immediately, if the user selects the next panel.
• This will speed up the animation between panels, but the slider will jump to the next slide instead of smoothly animating.
• Setting this to true appears to work nicely when adding navigation using a mousewheel.
• Default value is false.

hashTags

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

wrap

• 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.
• Default value is false.

buildNav

• 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.
• Default value is false.

navFormatter

• 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

• 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.
• Default value is "swing".

Times

speed

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

delayBeforeAnimate

• Sets the time to delay in milliseconds before MovingBoxes animates to the selected panel.
• This option is useful if you want to animate something else before bringing the selected panel into view.
• Default value is 0.

Selectors & classes

currentPanel

• Current panel class name.
• Don't forget to update the css if this value changes.
• Default value is "current".

tooltipClass

• 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
• Default value is "tooltip".

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.
• Default value is "disabled".

Callbacks

• See the Events documentation for more details.

preinit

• This event is triggered after the basic MovingBoxes structure has been established
• It occurs before the initialized event.
• Using this event allow for modifying the struction without any initialization delay.
• See issue #68 on how use this event to add inline navigation arrows.

initialized

• This event is triggered when MovingBoxes has completed initialization.

initChange

• This event is triggered upon panel change initialization.

beforeAnimation

• This event is triggered just before any animation occurs.

completed

• This event is triggered 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