SpriteSpin API Example

Shows how to use the SpriteSpin API object

HTML

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://spritespin.ginie.eu/spritespin.js"></script>
<div id='spritespin'></div>
<button id='prev'>Prev</button>
<button id='toggle'>Toggle</button>
<button id='reverse'>Reverse</button>
<button id='next'>Next</button>

JavaScript

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

var spin = $('#spritespin');
var api;

spin.spritespin({
    source: frames,
    width: 480,
    sense: -1,
    height: 327
});
api = spin.spritespin("api");

$('#prev').click(function(){
    if (api.data.reverse)
    api.data.reverse = !api.data.reverse;
    api.startAnimation();
});

$('#next').click(function(){
    if (!api.data.reverse)
    api.data.reverse = !api.data.reverse;
    api.startAnimation();
});

$('#toggle').click(function(){
    api.toggleAnimation();
});

$('#reverse').click(function(){
    api.data.reverse = !api.data.reverse;
});