MovingBoxes

MovingBoxes playground

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/MovingBoxes/css/movingboxes.css">
<script src="http://css-tricks.github.com/MovingBoxes/js/jquery.movingboxes.js"></script>
<ul id="slider">
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/1.jpg" alt="picture" />
         <h2>Olivia News Heading</h2>

        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a>
        </p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/2.jpg" alt="picture" />
         <h2>Alice News Heading</h2>

        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/3.jpg" alt="picture" />
         <h2>Yin News Heading</h2>

        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a>
        </p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/4.jpg" alt="picture" />
         <h2>Gerri News Heading</h2>

        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a>
        </p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/5.jpg" alt="picture" />
         <h2>Tabitha News Heading</h2>

        <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a>
        </p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
         <h2>Mary News Heading</h2>

        <p>A very short exerpt goes here... <a href="#">more</a>
        </p>
    </li>
    <li>
        <img src="http://css-tricks.github.com/MovingBoxes/demo/7.jpg" alt="picture" />
         <h2>Kitty News Heading</h2>

        <p>A very short exerpt...

CSS

body {
    direction: rtl;
}
.movingBoxes {
    direction: ltr;
    unicode-bidi: bidi-override;
}
#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}

JavaScript

$('#slider').movingBoxes({

    // overall width of movingBoxes
    // width: 300, // Deprecated, but still works in v2.2.2
    // current panel width adjusted to 50% of overall width
    // panelWidth: 0.5, // Deprecated, but still works in v2.2.2    

    // **** Appearance ****
    // start with this panel
    startPanel: 20,
    // non-current panel size: 80% of panel size
    reducedSize: 0.8,
    // if true, slider height set to max panel height; if false, height will auto adjust.
    fixedHeight: false,

    // **** Behaviour ****
    // if true, movingBoxes will initialize, then animate into the
    // starting slide (if not the first slide)
    initAnimation: true,
    // animation time in milliseconds
    speed: 500,
    // if true, hash tags are enabled
    hashTags: true,
    // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    wrap: false,
    // if true, navigation links will be added
    buildNav: true,
    // function which returns the navigation text for each panel
    navFormatter: function (index, panel) {
        return "&#9679;"
    },
    // anything other than "linear" or "swing" requires the easing plugin
    easing: 'swing',

    // **** Selectors & classes ****
    // current panel class
    currentPanel: 'current',
    // added to the navigation, but the title attribute is blank unless the link text-indent is negative
    tooltipClass: 'tooltip',

    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function (e, slider, tar) {},
    // callback upon change panel initialization
    initChange: function (e, slider, tar) {
        // alert( 'Changing panels to #' + tar );
    },
    // callback before any animation occurs
    beforeAnimation: function (e, slider, tar) {},
    // callback after animation completes
    completed: function (e, slider, tar) {
        // get name from title
   ...