Skip to content
This repository

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.

branch: master
README.rst

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

Frame 1 Frame 2 Frame 3 Frame 4
  1. 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.
  1. Initialize a div with JZoo (#animation):

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

    //Play the animation
    $('#animation').jzoopraxiscope('play');
    
    //Stop the animation
    $('#animation').jzoopraxiscope('stop');
    
Something went wrong with that request. Please try again.