Moving Boxes Updated

Update (10/8/2011): A plugin is now available for WordPress for MovingBoxes v2.1.4, which you can download here or search for 'movingboxes' in your 'Install Plugins' page of your site admin section. More features and options will be added once craftyhub, the author, gets settled in :)

Update (10/13/2010): Version 1.5 now available!

I've updated the Moving Boxes script by Chris Coyier by converting the script into a plugin so now you can add multiple Moving Boxes blocks on the page at one time.

I haven't done extensive testing of the script, so if you find any bugs please feel free to contact me.

Download: uncompressed | minified | zipped file | github (see a demo!)

Options

• Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma

<script type="text/javascript">
$(function(){
$(selector).movingBoxes({ key: value, key: value, key: value })
})
</script>

Key	Value (default shown)	Description
startPanel	1	Choose the initial panel to show in the scroll window.
width	800	Overall width of movingBoxes.
panelWidth	.50	Current panel width adjusted to 50% of movingBoxes width.
reducedSize	.8	Non-current panel size: 80% of current panel size.
imageRatio	4/3	Image ratio set to 4:3. Wide screen would be 16:9 (16/9).
speed	500	Animation time in milliseconds for the scroll and expanding of the panel.
hashTags	true	If true, hash tags (browser history) are enabled.
wrap	false	If true,the panel will "wrap" at the ends.

Methods

Panels are numbered as a standard index (1st panel number is one, second is two, etc.).

• Get number of currently selected panel:

  $('.slider').data('movingBoxes').currentPanel();

• Set currently selected panel:

  $('.slider').data('movingBoxes').currentPanel(2);

External controls:

$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('.slider').data('movingBoxes').goBack();    // go back one slide (if possible)