Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
JZoopraxiscope is a jQuery plugin for making animations from static images inspired in Eadweard Muybridge's Zoopraxiscope.
JavaScript
tree: 048e7fdf64

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
example
media
src
.project
CCA-LICENSE
GPL-LICENSE
LICENSE
MIT-LICENSE
README.md

README.md

JZoopraxiscope

http://www.cobalys.com/open-source/jzoopraxiscope.html https://github.com/cobalys/JZoopraxiscope

Animate static image sequences with this jQuery plugin.

JZoopraxiscope is a jQuery plugin for animations from static images. It is 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 link the jquery.jzoopraxiscope.js file in your page

    <script src="jquery.jzoopraxiscope.js"></script>
    
  2. Link the jQuery and jQuery UI libraries in 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'

    +------------+------------+------------+------------+
    |  Frame 1   |  Frame 2   |  Frame 3   |  Frame 4   |
    +------------+------------+------------+------------+
    
  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.

  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');
    
Something went wrong with that request. Please try again.