JZoopraxiscope

• http://www.cobalys.com/open-source/jzoopraxiscope.html
• https://github.com/cobalys/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

1. Download JZoopraxiscope and reference the jquery.jzoopraxiscope.js file from your page:

   <script src="jquery.jzoopraxiscope.js"></script> 

2. 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> 

3. 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':

4. Define the options:

   var optionsAnimation = {         'widthItem' : 380,         'widthImage' : 4560,         'height' : 306,         'image' : 'images/jzoo.jpg'} 

5. Initialize a div with JZoo (#animation):

   //Html <div id="animation" style="border: 1px solid #999; margin: auto;"></div>  //Javascript $('#animation').jzoopraxiscope(optionsAnimation); 

6. Control JZoo:

   //Play the animation $('#animation').jzoopraxiscope('play');  //Stop the animation $('#animation').jzoopraxiscope('stop');