Skip to content
Rob Garrison edited this page Aug 2, 2016 · 6 revisions

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

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

  • 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)
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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">';
     }
  • 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".
  • Sets the animation time, in milliseconds, to switch between panels.
  • This value must be a number and reasonably fast.
  • Default value is 500.
  • 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.
  • Current panel class name.
  • Don't forget to update the css if this value changes.
  • Default value is "current".
  • 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".
  • 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".
  • See the Events documentation for more details.
  • 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.
  • This event is triggered when MovingBoxes has completed initialization.
  • This event is triggered upon panel change initialization.
  • This event is triggered just before any animation occurs.
  • This event is triggered after animation completes.
  • 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