SpriteSpin Slider Example

Shows how to add a slider to SpriteSpin

by imran473

HTML

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://spritespin.ginie.eu/spritespin.js"></script>
<div id='container'>
    <div id='spritespin'></div>
    <div id='progress'></div>
</div>

CSS

#container{
    width: 480px;
}

JavaScript

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

$('#spritespin').spritespin({
    source: frames,
    width: 480,
    sense: -100,
    height: 327,	plugins: [
      'progress',
      '360',
      'drag'
    ],
    onProgress: function(e, p){
        $("#progress").html("Progress: " + p.percent + "%")
    }
});