SpriteSpin Slider Example

Shows how to add a slider to SpriteSpin

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://spritespin.ginie.eu/spritespin.js"></script>
<!-- This example requires jquery UI -->
<div id='container'>
    <div id='spritespin'></div>
    <div id='slider'></div>
</div>

CSS

#container{
    width: 480px;
    height: 50px;
    background: red;
}

JavaScript

var frames = SpriteSpin.sourceArray('http://spritespin.ginie.eu/images/rad_zoom_{frame}.jpg', { 
    frame: [1, 34], 
    digits: 3 
});

var spin = $('#spritespin');

spin.spritespin({
    source: frames,
    width: 480,
    sense: -1,
    height: 327,
    onLoad: function(){
        slide.slider({
            min: 0,
            max: frames.length - 1,
            slide: function(e, ui){
                var api = spin.spritespin('api');
                api.stopAnimation();
                api.updateFrame(ui.value);
            }
        })
    },

});