-
Notifications
You must be signed in to change notification settings - Fork 146
Setup
Mottie edited this page Nov 17, 2012
·
12 revisions
Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits
$('.slider').movingBoxes({
// Appearance
startPanel : 1, // start with this panel
reducedSize : 0.8, // non-current panel size: 80% of panel size
fixedHeight : false, // if true, slider height set to max panel height; if false, slider height will auto adjust.
// Behaviour
initAnimation: true, // if true, MovingBoxes will initialize, then animate into the starting slide (if not the first slide)
stopAnimation: false, // if true, movingBoxes will force the animation to complete immediately, if the user selects the next panel
hashTags : true, // if true, hash tags are enabled
wrap : false, // if true, the panel will "wrap" (now loops in v2.2, or appears as if there are infinite panels)
buildNav : false, // if true, navigation links will be added
navFormatter : null, // function which returns the navigation text for each panel
easing : 'swing', // anything other than "linear" or "swing" requires the easing plugin
// Times
speed : 500, // animation time in milliseconds
delayBeforeAnimate : 0, // time to delay in milliseconds before MovingBoxes animates to the selected panel
// Selectors & classes
currentPanel : 'current', // current panel class
tooltipClass : 'tooltip', // added to the navigation, but the title attribute is blank unless the link text-indent is negative
disabled : 'disabled',// class added to arrows that are disabled (left arrow when on first panel, right arrow on last panel)
// Callbacks
preinit : null, // callback after the basic MovingBoxes structure has been built; before "initialized"
initialized : null, // callback when MovingBoxes has completed initialization
initChange : null, // callback upon change panel initialization
beforeAnimation : null, // callback before any animation occurs
completed : null // callback after animation completes
// deprecated options - but still used to keep the plugin backwards compatible
// and allow resizing the overall width and panel width dynamically (i.e. on window resize)
// width : 800, // overall width of movingBoxes (not including navigation arrows)
// panelWidth : 0.5 // current panel width adjusted to 50% of overall width
});- Add the following inside the
<head></head>. - Note: MovingBoxes requires a minimum of jQuery 1.4.2 to work properly.
<!-- Required CSS -->
<link href="css/movingboxes.css" media="screen" charset="utf-8" rel="stylesheet">
<!--[if lt IE 9]>
<link type="text/css" href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<style>
/* MovingBoxes dimensions set using css in v2.2.2+ */
#slider { width: 500px; }
#slider li { width: 250px; }
</style>
<!-- Required script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" charset="utf-8"></script>
<script src="js/jquery.movingboxes.js" charset="utf-8"></script>
<!-- Optional plugins -->
<script src="js/jquery.easing.1.2.js"></script>
<!-- Required script -->
<script>
$(function(){
$('#boxes').movingBoxes(); // add any non-default options inside here
});
</script>- See the Usage page on how to set up the css to make internal element resize, or not resize.
<div id="boxes">
<div> <!-- panel #1 -->
<img src="images/1.jpg" alt="picture" />
<h2>Heading</h2>
<p>A very short exerpt goes here</p>
</div>
<div> <!-- panel #2 -->
<img src="images/2.jpg" alt="picture" />
<h2>Heading</h2>
<p>A very short exerpt goes here</p>
</div>
</div><ul id="boxes">
<li> <!-- panel #1 -->
<img src="images/1.jpg" alt="picture" />
<h2>Heading</h2>
<p>A very short exerpt goes here</p>
</li>
<li> <!-- panel #2 -->
<img src="images/2.jpg" alt="picture" />
<h2>Heading</h2>
<p>A very short exerpt goes here</p>
</li>
</ul>Thanks to Craftyhub for creating a Wordpress plugin for MovingBoxes. Get [it here] (http://wordpress.org/extend/plugins/movingboxes-wp/) or search for 'movingboxes' in your 'Install Plugins' page of your site admin section.
Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change | Credits