JZoopraxiscope
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge's Zoopraxiscope.
Requirements
- JQuery
- JQuery UI
- An image representing the sequence to be animated
Browser Compatibility
- Chrome 18.0.1025.162
- Mozilla Firefox 11.0
- Internet Explorer 8
- Safari 5
- Opera 11.62
Use
Download JZoopraxiscope and reference the jquery.jzoopraxiscope.js file from your page:
<script src="jquery.jzoopraxiscope.js"></script>
Reference jQuery and jQuery UI libraries from your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
Prepare the static sequence. Every frame must have the same width and be attached to his previous frame in a horizontal image. Refer to the included file 'jzoo.jpg':
| Frame 1 | Frame 2 | Frame 3 | Frame 4 |
Define the options:
var optionsAnimation = { 'widthItem' : 380, 'widthImage' : 4560, 'height' : 306, 'image' : 'images/jzoo.jpg'}
| widthItem: | Width of every frame. |
|---|---|
| widthImage: | Width of the entire image. |
| height: | Height of the image. |
| image: | Location of the image. Use relative or absolute path, relative paths are related to the html document where the plugin is installed. |
Initialize a div with JZoo (#animation):
//Html <div id="animation" style="border: 1px solid #999; margin: auto;"></div> //Javascript $('#animation').jzoopraxiscope(optionsAnimation);Control JZoo:
//Play the animation $('#animation').jzoopraxiscope('play'); //Stop the animation $('#animation').jzoopraxiscope('stop');