AnythingSlider playground

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

by Mottie

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/demos/colorbox/colorbox.css">
<script src="http://proloser.github.com/AnythingSlider/demos/colorbox/jquery.colorbox-min.js"></script>
<script src="http://flowplayer-core.googlecode.com/svn-history/r618/flowplayer/trunk/example/flowplayer-3.2.6.min.js"></script>
<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/550/298" alt="" /></li>
    
    <li><img src="http://placehold.it/550x298" alt="" /></li>
    
    <li><img src="http://ipsumimage.appspot.com/550x298.png" alt="" /></li>
    
    <li><img src="http://dummyimage.com/550x298/000/fff.jpg" alt="" /></li>
    
    <li><img src="http://placedog.com/550/298" alt="" /></li>
    
</ul>

CSS

/*
    AnythingSlider v1.7+ themes
    Shiny theme
*/

/****************************
 SET DEFAULT DIMENSIONS HERE
 ****************************/
/* Change the ID to match your slider */
#slider {
    width: 550px;
    height: 298px;
    list-style: none;
    /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
    overflow-y: auto;
    overflow-x: hidden;
}

#slider li
{
    width: 550px;
    height: 298px;
}

/* Opera width restriction */
.anythingBase {
    max-width: 32766px;
    background: transparent;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    /* override the #slider overflow above, once the class is added */
    overflow: visible !important;
    height: 300px;
}

#slider a.flowplayer {
    display:block;
    width: 550px;
    height: 298px;
    padding: 0 0px 0 0px;
    z-index: -1;
    }

/*************
 ACTIVE STATE (slider has keyboard focus)
 *************/
/* slider window - top & bottom borders, active state */
div.anythingSlider-shiny.activeSlider .anythingWindow {
    border-color: #999;
}
div.anythingSlider-shiny.activeSlider .back a {
    background-position: left top;
}
div.anythingSlider-shiny.activeSlider .forward a {
    background-position: right top;
}
div.anythingSlider-shiny .back a:hover,
div.anythingSlider-shiny .back a.hover,
div.anythingSlider-shiny.activeSlider .back a:hover,
div.anythingSlider-shiny.activeSlider .back a.hover {
    background-position: left -112px;
}
div.anythingSlider-shiny .forward a:hover,
div.anythingSlider-shiny .forward a.hover,
div.anythingSlider-shiny.activeSlider .forward a:hover,
div.anythingSlider-shiny.activeSlider .forward a.hover {
    background-position: right -112px;
}
/*****************
 DEFAULT STATE (no keyboard focus)
 *****************/
/* Overall Wrapper */
div.anythingSlider-shiny {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 0 0px; /* adjust left/right padding here...

JavaScript

$(function() {

    // 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: {
            onResume: function(clip) {
                $('#slider').data('AnythingSlider').startStop(false);
            },
            onFinish: function(clip) {
                $('#slider').data('AnythingSlider').startStop(true);
            },
            scaling: 'fit',
            autoBuffering: true,
            autoPlay: false

        },
        play: {
            opacity: 0
        }
    });

    // Set up AnythingSlider
    $('#slider').anythingSlider({
        theme: "shiny",
        height: 200,
        buildNavigation: true,
        delay: 5000,
        buildStartStop: true,
        hashTags: false,
        resizeContents: false,
        autoPlay: true,
        expand: false,
        startPanel: 1,
        infiniteSlides: true,

        // 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) {
               ...