-
Notifications
You must be signed in to change notification settings - Fork 146
Setup
Mottie edited this page Nov 10, 2011
·
12 revisions
Wiki Pages: Home | FAQ | Setup | Usage | Events | Change | Credits
$('.slider').movingBoxes({
// Appearance
startPanel : 1, // start with this panel
width : 800, // overall width of movingBoxes (not including navigation arrows)
panelWidth : 0.5, // current panel width adjusted to 50% of overall width
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
speed : 500, // animation time in milliseconds
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
// 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
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
});Add the following inside the <head></head>. Note: MovingBoxes requires a minimum of jQuery 1.4.2 to work properly.
<!-- Required CSS -->
<link type="text/css" 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]-->
<!-- Required script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.movingboxes.js" charset="utf-8"></script>
<!-- Optional plugins -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<!-- Required script -->
<script type="text/javascript">
$(function(){
$('#boxes').movingBoxes(); // add any non-default options here
});
</script><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 | Usage | Events | Change | Credits