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>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.js"></script>
<script src="http://css-tricks.github.com/MovingBoxes/js/jquery.easing.1.2.js"></script>
<!--[if lt IE 9]>
<link  type="text/css"  href="http://css-tricks.github.com/MovingBoxes/css/movingboxes-ie.css"  rel="stylesheet" media="screen" />
<![endif]-->

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

CSS

#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}

JavaScript

function fnIsAppleMobile() {
    if (navigator && navigator.userAgent && navigator.userAgent != null) {
        var strUserAgent = navigator.userAgent.toLowerCase();
        var arrMatches = strUserAgent.match(/(iphone|ipod|ipad|android)/);
        if (arrMatches)
            return true;
    }
    // End if (navigator && navigator.userAgent) 
    return false;
}
jQuery(function($){

    $('#slider').movingBoxes({
        startPanel: 4,
        reducedSize: 0.9,
        initAnimation: true,
        hashTags: false,
        wrap: true,
        buildNav: true,
        speed: 500,
        stopAnimation: true,
        fixedHeight: true,
        easing: 'easeOutBack',
        navFormatter: function(index, panel) {
            return "&#9679;";
        },
        preinit: function(e, mb, tar) {


            if (fnIsAppleMobile() == false) {
            var throttled = false,
            throttledDelay = 200;
            mb.$window.mousewheel(function(event, delta) {
                if (!throttled) {
                    mb.change(mb.curPanel + (delta < 0 ? 1: -1));
                    throttled = true;
                    setTimeout(function() {
                        throttled = false;
                    }, throttledDelay);
                }
                return false;
            });
}


        }
    });
        if (fnIsAppleMobile() == true) { 
    /* Add Swipe to Moving Boxes only when the user Agent is an Smartphone */
        var target = $('#slider'),
        // allow movement if < 1000 ms (1 sec)
        maxTime = 1000,
        // swipe movement of 50 pixels triggers the swipe
        maxDistance = 50,

        api = target.data('movingBoxes'),
        startX = 0,
        startTime = 0,
        touch = "ontouchend" in document,
        startEvent = (touch) ? 'touchstart': 'mousedown',
        moveEvent = (touch) ? 'touchmove': 'mousemove',
        endEvent = (touch) ? 'touchend': 'mouseup';

        api.$panels.on(startEvent, function(e) {
            //...