Monday, June 21, 2010

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>
KeyValue
(default shown)
Description
startPanel1Choose the initial panel to show in the scroll window.
width800Overall width of movingBoxes.
panelWidth.50Current panel width adjusted to 50% of movingBoxes width.
reducedSize.8Non-current panel size: 80% of current panel size.
imageRatio4/3Image ratio set to 4:3. Wide screen would be 16:9 (16/9).
speed500Animation time in milliseconds for the scroll and expanding of the panel.
hashTagstrueIf true, hash tags (browser history) are enabled.
wrapfalseIf 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)