Moving Boxes WordPress Plugin

This plugin builds a Moving Boxes Image Slider on any page that you place the [MovingBoxes] shortcode. Images need to be uploaded using the WordPress Media Upload feature.

Settings for the sliders can be made in the WordPress admin panel for the plugin which will apply to all instances of the Moving Boxes Slider throughout your site.

Installation instructions

  1. Unzip and upload the folder and all files to the ‘/wp-content/plugins/’ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Upload your images to the WordPress media library ‘/wp-admin/media-new.php’ and attach them to the appropriate page/post.
  4. Place the shortcode [MovingBoxes] in the location that you want the gallery to appear.
  5. Control the galleries settings in ‘wp-admin/options-general.php?page=MovingBoxes-Admin’.

Alternatively simply install from the plugins panel using the Add new page and search for MovingBoxes.


Configure

You can specify the following settings in the plugins admin page:

Start Panel Which panel should be centered and enlarged to begin with.

Width The overall width of the gallery.

Panel Width The size of the current (centered) panel as a proportion of the overall width (0.1-1.0).

Reduced Size The reduced size of the panels as a proportion of the panel size (0.1-1.0).

Fixed Height If true the height of the slider will be fixed to the height of the tallest panel (true or false).

Speed Speed of the animation in milliseconds.

Hash Tags If true hash tags will be used allowing you to link to specific panels in the gallery.

Wrap Around Whether the slider fast forwards/rewinds when the last or first image is reached (true or false).

Show Navigation If true navigation links are displayed below the gallery.

Navigation Format Specify what should be used as the navigation. Defaults to numbered navigation.

Animation Easing (linear or swing).


Adding Images

Add your images using the WordPress Media Upload.
The title you provide is placed below the image with the caption below it. The Alternate text is, surprisingly, used for the image alt text attribute. The link that you would like the more link to point to should be placed in the Description field. See the screenshot, right.
Image text options

Changelog

Version 0.4.1: 9-10-2011

  • Updated some broken links

Version 0.4

  • Initial release.

  • Moving Boxes

    Great blog- moving can be so stressful so any tips are great!

    http://www.boxshop.uk.com/

  • Cool3guy

    where i can download

  • Dario Pedicini

    Hi,

    Thanks for this!

    I’d like to put moving boxes in the website header (home page, specifically), and have it display images from different posts (selected by me, say the featured image of posts of my choice).

    How would I go about modifying the plugin to work this way?

    • Anonymous

      Sorry for the slow reply.

      You would have to add a function that could be called from the template. As this plugin works by attaching images to a post a different method would probably be need to add the images to the gallery.

      I’ll take a look over the next couple of days and get back to you.

  • Ankit Agarwal

    Hey,Any Way To Implement Multiple instances of this on Same Page?

    • Anonymous

      Sorry this is a bit late. You can have multiple instances using the original javascript here: https://github.com/chriscoyier/MovingBoxes to set up your own sliders. I’m not sure I’ll be adding that as an option to this plugin though.

  • Greg Hill

    how can I change “more” to other words or remove it all together?

    • Anonymous

      You can change the link in the template files. Either edit the default template or duplicate the ‘template -> default’ folder and rename it.

      You then need to edit the 4th line in the ‘template-ul.tpl.php’ and ‘template-div.tpl.php’ files to change the link to read as you like, or completely remove the link.

      The template files are found in the plugin folder in wp-content.

      I’ll add an option to the plugins settings page when I get a moment.

  • Jen Pack

    Hi,  I have two questions.  Is there any way to animate this so that the images move to the next one automatically?  Also, is there anyway to have the size based on the height instead of the width?  I’d like my photos to be uniform as they slide across.  Thanks so much!

    • Anonymous

      Regarding the animation, if you are happy altering the plugin you should be able to set this up using the code here: https://github.com/chriscoyier/MovingBoxes/issues/59. I need to update the MovingBoxes JavaScript in this plugin anyway so I’ll add auto animation as an option at the same time. Possibly at the weekend.

      Regarding the height based size I don’t believe that this is possible. I got around on sites which I use MovingBoxes on by creating all my images the same height.

      Cheers, Jon

      • Jen Pack

        I’ll give that a try.  Thanks!

        Also, does Moving Boxes only support 10 images?

        • Anonymous

          mmm, it looks like WordPress limits attachments to 10 per post. So, unfortunately, you would only be able to use 10 images with this plugin.

  • Chris Stewart

    hey there.  Is ther a way to make the images clickable within the plugin?  I would like to use this as a slider to where we have been featured.  Thanks

    • Anonymous

      Hi Chris, that’s no problem, you just need to change the template. In the MovinBoxes plugin folder in wp-content you need to alter the files in template -> default. I recommend duplicating the default folder to create your own template which you can then select in the MovingBoxes settings – don’t leave any spaces in the new templates folder name though.

      Change the line second line in ‘template-div.tpl.php’ and ‘template-ul.tpl.php’ from:

      to…
      <a href=’{image_link}’>

      <a>

      The plugin will will then wrap the image in the link specified in the images description field. 

      Hope this helps, let me know if you have problems. Jon

      • Chris Stewart

        Right on Jon. Thanks so much. I will mess with the code in a little bit and let you know if I run into any issues. Thanks again for the quick response and help. You rock.

        • Chris Stewart

          Hey Jon, So i did what you requested and the images are clickable but even when I edit the URL to what I want it to go to, it just automatically places a link to my site.

          Feel free to check it out.  Its just my test site but if you can help me to have each image have its own link then that would be great.

          Heres my test site:
          http://www.jenstewartphotographyclients.com/test/ 

          If you can help cool, and if not thats ok too.

          Thanks

          • Anonymous

            I’ve sent you an email Chris

        • Chris Stewart

          Never mind jon i figured out what the issue was.  Thanks again for your help.  You rock!!  I got it to work.

  • Missrosas

    Hi there!
    Lovely plugin!
    Is there any way that I could change the colours of the box around it? basically make everything white :)

    Thanks!
    H

    • Anonymous

      Yes, you just need to change the CSS rules in the plugin’s templates folder. I’d recommend duplicating the default template folder so that you always have the original to go back to in case something goes wrong.

      The classes you need to change are ‘.mb-wrapper’ and ‘.mb-controls’. You can change the border colours and background colours to those of your choice.

  • http://www.jenstewartphotography.com/blog Chris Stewart

    Hey Jon I have a question for you.  Is there any way to see why on my site Moving boxes only will allow 7 images in the slider, but in my test site I can do 10.  Any ideas on why that is?

    • Anonymous

      Hi Chris, I presume you mean you can only attach 7 images to the post/page that  in WordPress on your main site, correct?

      Do you have the same versions of WordPress on both sites? Do you get a message when you try to attach the 8th image to the post?

      Also have you tried a few other images? Maybe the last one is corrupt?

      I can’t think of any reason why you shouldn’t be able to attach more

      • Chris Stewart

        Hey Jon,  Thanks for getting back to me.  I have the same version of wordpress running on both my test site and regular site.  When I tried to attach the max of 10 images on my site I only see 7 in the moving boxes admin.  I attached a image here to it.  I also tried making a whole new post and with no luck there too.  I will try a few more things and see if I can get this to work.  I have not tried other images but thats one thing I will work on here today.  Thanks Jon.

        • Chris Stewart

          Hey Jon,  Never mind.  I ended up taking it off the site cause I cant figure out whats causing the issue.  Thanks though for making this plug in.  :)

          • Anonymous

            Hi Chris, shame the plugin didn’t work out for you. Just out of interest are you now using a slider that allows you to have more images?

  • http://profile.yahoo.com/CAH6OJDKN2KKIPBPVJGVZBQCSM Rosler

    Is it possible to decrease the spacing between each image?

    • Anonymous

      Yes, this is possible. You need to edit the ‘movingboxes.css’ file which you find in the templates folder within the ‘movingboxes-wp’ plugin folder.

      You can reduce the spacing between the boxes, for example, by changing the padding value in the ’.mb-slider .mb-panel’ style.

      On line 41 you will see ‘padding: 5px;’ change this to zero and the boxes will be touching.

      To change the spacing inside the box you should use the ‘.mb-inside’ style.

      Hope this helps.

  • Samotosh1234

    what will be my [MovingBoxes] short code. From where i will find it?

    • Anonymous

      ‘[MovingBoxes]‘ is the shortcode, you just need to add this code to your page or post in the location you want the images to appear.

  • Ryley

    When I try to implement the slider onto a page I get the following message within the Moving Boxes section 
    Warning: in_array() [function.in-array]: Wrong datatype for second argument in wp/wp-content/plugins/movingboxes-wp/MovingBoxes.php 

    And only one of the attached images are available to be selected – any idea whats going on? 

    • Anonymous

      Hi Ryley, Does the warning give you a line number?

      Also could you tell me which version of WordPress and PHP you are using? 

      Thanks

  • Dibosnjak

    how do i get the white space in front of the first image box and last image box?  I would like it to flow from my last one to the first one without the user realizing they reached the end?

  • Bernie

    Is it possible to delete just one image from the other images. I added another image to my wordpress page after I built the Movingboxes slider, but Movingboxes automatically included it in the slider area. I need to keep that area open for slider images I am adding later.

  • Luca

    Hi,
    can I get moving boxes in the wordpress header for the home page through code?
    thank a lot.

  • Bill

    Is there a way to remove all spacing left and right?

  • Styletheology

    Hey Jon, I just downloaded the plugin, and it isn’t working at all. I installed the plugin and went to my Media Library to attach some images to the page I want, but when I post the [MovingBoxes] code all that shows up is a blank bar with the red arrows on each end. Any ideas? 

    • MinBoyce

      Urgh, me too. WP3.4.1, PHP5. The fact that you posted this a month ago is ominous and makes me fear for the worst. The error I get via FireBug is:
      TypeError: a.$panels.eq(b – 1).position() is null

  • Sinans11

    Hello, I few people have already asked this question but there seems to be no reply. Can the plugin be viewed on a custom page like index rather then on posts it self or pages??? If so what must I do. Thanks

  • Alesandraquiqueret

    Thank you so much for creating this plugin! It is very nice and easy to use. Brillant!
    I would like to ask a little question. Is it possible to customize the colour of the border and the arrow button?

    Thanks a lot again and have a very nice day.

  • Buxton161

    I can really use some help getting this plugin to work with an auction ” featured” auction widget, I see your contact page is down?

  • Javier Ordinola

    Hi, I upload 100 images but only show 10, why??

  • Dennis

    Thanks for your plugin, I abolutely love it!
    Is there any way to make the slideshow continuous: add the > control to the last image (and make it go to the first one) and the < control to the first image (and make it go to the last one)?

«