AnythingSlider playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<script src="http://flowplayer-core.googlecode.com/svn-history/r618/flowplayer/trunk/example/flowplayer-3.2.6.min.js"></script>
<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">

<ul id="slider">    
    <li>
        <a class="flowplayer" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"></a>
    </li>
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    <li>
        <a class="flowplayer" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"></a>
    </li>
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="http://ipsumimage.appspot.com/300x200.png" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
</ul>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
ul#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

ul#slider a.flowplayer {
    display:block;
    width: 300px;
    height: 200px;
}

JavaScript

// Set up players 
// please use your own player file
// ***********************
var fp = 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf';
flowplayer('a.flowplayer', fp, {
    clip: {
        autoPlay: false
    }
});

// Set up AnythingSlider
$('#slider').anythingSlider({

    // pause all videos when changing slides
    onSlideInit: function(e, slider) {
        if ($f) {
            $f("*").each(function() {
                if (this.isPlaying()) {
                    this.pause();
                }
            });
        }
    },

    // Only play a paused video when a slide comes into view
    onSlideComplete: function(slider) {
        if ($f) {
            slider.$currentPage.find('.flowplayer').flowplayer().each(function() {
                if (this.isPaused()) {
                    this.play();
                }
            });
        }
    },

    // *********** Video ***********
    // this DOES NOTHING because jwplayer is set up outside of AnythingSlider
    addWmodeToObject: "opaque",

    // return true if video is playing or false if not
    isVideoPlaying: function(slider) {
        var playing = false;
        if ($f) {
            slider.$currentPage.find('.flowplayer').flowplayer().each(function() {
                if (this.isPlaying()) {
                    playing = true;
                }
            });
        }
        return playing;
    }
});