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!)

  • Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma
<script type="text/javascript">
$(selector).movingBoxes({ key: value, key: value, key: value })
(default shown)
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.
Panels are numbered as a standard index (1st panel number is one, second is two, etc.).
  • Get number of currently selected panel:
  • Set currently selected panel:
External controls:
$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('.slider').data('movingBoxes').goBack();    // go back one slide (if possible)


    1. Hi

      Thanks for this great plugin. Is it possible to loop the slide show? ie. the first slide loaded after last slide?

    2. Hi Vimal!

      I'll look into adding this feature when I have some more time, but could you please add this "issue" to github, it makes it easier to keep track of the request. Thanks!

    3. This sounds great but I tried every which way to install and it does not show up in my WP Plugins
      It does install & then it says 'there is no title".
      I noticed there is no .php file whereas all other plugins have this file type and they are recognized/work.
      Any suggestions?

    4. Hi F. William Houraney!

      The moving boxes script is actually a jQuery plugin and sadly not set up to work as a WP plugin. I don't know how to make it into a WP plugin, but I will add it as an issue on the github site and maybe someone who does know can help out :)

      Sorry I couldn't be more helpful, but I'll look into it when I have some free time.

    5. Thanks Motie.
      This will be a big hit as a WP plugin.
      If it happens, please let me know;
      Keep up the good work.

    6. Hi,

      I am curious to know how can I change the size of the entire slideshow. I tried to change the size in the js, css... to make everything smaller, to fit my page, But I have weird results. Can you please help me by telling me exact what variable size I need to change and the percentage of each.


    7. Hi Tina!

      I tried making the whole thing smaller and ran into the same problem as you :P... I didn't actually design the MovingBoxes code, I just turned it into a plugin; but I will take a closer look at the code and probably change a few things to make things more clear, I'll try to update it by this weekend :)

    8. Hello!

      Is it possible to have a "circular" option? I mean, the last image is followed by the first image like an endless loop. That would be great!

    9. @Tina: Ok, it's taking a bit longer to update than planned - my monitor blew up. But, I should have it done by next weekend.

      @Recep: We have an issue that vimal submitted on github. I'll look into the looping after I get the resizing issue completed. In the mean time, have you looked at the latest version of AnythingSlider?

    10. @Tina: I've updated the MovingBoxes script to make it easier to set the overall width, then set the panel size using percentages. You can't set the overall height, because it is based on the panel contents. If you have any problems, please feel free to message me.

      @Recap: I'll look into looping the boxes when I get back from my trip.

    11. @Recap: I just posted v1.5 to the github repository that does a pseudo wrap of the panels. Instead of wrapping to the first image from the last, it rewinds. I know it's not perfect or probably what you wanted, but to get a wrap to work I'd have to clone the panel, then make sure it was resized properly, etc... I tried, but it didn't look good at all. So I reverted to just rewinding.

    12. Tested it out and noticed there is a sliding glitch when more than 11 panels are used with the following settings... width to 960, panelWidth to 1, reducedSize to 1, and imageRatio to 1.

      The glitch is that instead of sliding to the next slide, it will loop through all the panels first before going to the next slide. The same is true for previous slides. Also, when the current state is the last slide and using the navigation to click on the first slide link... it will just pop to the first slide instantly, instead of sliding backwards.

    13. Is it possible to auto-start, like a slideshow, to show each image in the slider at specified interval?

    14. @Jeff: I finally found the problem with the sliding glitch, it was a bug in jQuery v1.4+. I fixed the script and the today jQuery 1.5 has been released, so now even older versions of MovingBoxes won't have the glitch if you update jQuery.

      @Nilestyle: MovingBoxes doesn't have this built in, but you can easily add a slideshow using the API. This basic example should get you started:

         setInterval( function(){
          var s1 = $('#slider-one').data('movingBoxes');
          s1.currentPanel( s1.curPanel + 1);
         }, 5000 );

      Adjust the interval time (5000 milliseconds) as desired

    15. @Mottie: Thanks. I updated the code and my original sliding glitch problem works now... though I'm finding a new problem with IE only since the update. In IE 7 and 8 the animations are really slow if they slide at all, though I find that they work fine if the link is double clicked instead of single clicked.

    16. @Mottie: I was just wondering if someone have ever figured out how to make the images wrap around without rewinding?
      Thank you!

    17. @Mottie: I also have another question. Is there a way to set overall width of movingBoxes to 100% of the total page? Right now it seems like I can only put a specific value inside the js file.

    18. Hi Alex!

      To make the boxes wrap without rewinding would take a lot of code changes. This would also be the case for making a percentage width work. Making these methods work on all browsers and look good is harder than it sounds.

      I've been busy with other projects, but I'll look into this when I get some time - no guarantees that I'll get it done though!

    19. Hi Mottie, thanks for the great work!

      I was wondering is it possible to have multiple image show up, Ie five image showing up at the same time, much like the slider for the site.

      Any help would be greatly appreciated, thanks again!

    20. Hi Rico!

      It's not set up to show more visible than what you see now - one in the middle and the corners of two others. But I'll look into making the number visible variable.

    21. @Rico and @AlexKumpel: I haven't gotten around to adding your suggestions to MovingBoxes, but the other project I work on AnythingSlider does now have the ability to show multiple slides and fit 100% width on a page. I look into adding these same features to MovingBoxes soon.

    22. A plugin now available for wordpress 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 :)

    23. Hey can any tell how to install this plugin to blogger blog?

    24. Hi Pradeep's ♥!

      Check out this blog post I just made.