http://github.com/brentertz/scianimator
Version: 1.4, Last updated: 1/18/2011
SciAnimator provides a simple yet powerful interface for animating a series of images.
http://brentertz.github.com/scianimator/
These examples illustrate a few ways in which this plugin can be used.
Select the element which will hold the animator. (Perhaps a <div id="scianimator"></div>
that you have already inserted into your page?) Pass an array of images in the options object.
$('#scianimator').scianimator({
'images': ['images/foo.png', 'images/bar.png', 'images/bas.png', 'images/bat.png'],
});
$('#scianimator').scianimator({
'images': ['images/foo.png', 'images/bar.png', 'images/bas.png', 'images/bat.png'],
}).scianimator('play');
$('#scianimator').scianimator({
'images': ['images/foo.png', 'images/bar.png', 'images/bas.png', 'images/bat.png'],
'width': 600,
'theme': 'dark',
'defaultFrame': 'last'
});
$.fn.scianimator.defaults.debug = true; // turn on debug logging
$.fn.scianimator.defaults.theme = 'blue'; // change default theme
$.fn.scianimator.defaults.utf8 = 'false'; // Use text labels rather than UTF8 symbols
$.fn.scianimator.defaults.labels.text.play = 'Juego'; // l10n/i18n
// then create your instances and they will use your custom defaults...
$('#scianimator').scianimator('play');
$('#scianimator').scianimator('showStatus', {status:'Hello Ladies...', timeout:3000});
What settings/options are available?
<shift>+<left arrow> = first, <left arrow> = previous, <spacebar> or <enter/return> = play/stop, <right arrow> = next, <shift>+<right arrow> = last
For more details, check out the code - look for:
$.fn.scianimator.defaults
in http://github.com/brentertz/scianimator/assets/js/jquery.scianimator.js.
Information about what version or versions of jQuery this plugin has been tested with, what browsers it has been tested in, etc.
If your desired browser/version is not listed, it does not necessarily mean that it does not work, but rather that it hasn't yet been tested.
<ctrl>
+click to disable frames, but I was testing on a VM. Can anyone verify this behavior? Aside from resolving the KNOWN ISSUES, the following items are in consideration for future updates. Feel free to recommend any of these or make additional suggestions.
<br />
element or new line in controls list - better to revise controls CSS using floatsCopyright (c) 2010 Brent Ertz Released under the MIT license. http://github.com/brentertz/scianimator
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.