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

  • Anonymous

    You can download the plugin here: http://wordpress.org/extend/plugins/movingboxes-wp/

    or search for ‘MovingBoxes’ in the WordPress plugin installation screen and install it from there.

  • 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?

  • 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.

  • 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.

  • 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

  • Chris Stewart

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

  • Anonymous

    I’ve sent you an email Chris

  • 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.

«