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.

tree: b48f69eae7

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 example
Octocat-spinner-32 media
Octocat-spinner-32 src
Octocat-spinner-32 .project
Octocat-spinner-32 CCA-LICENSE first commit April 14, 2012
Octocat-spinner-32 GPL-LICENSE first commit April 14, 2012
Octocat-spinner-32 LICENSE
Octocat-spinner-32 MIT-LICENSE first commit April 14, 2012
Octocat-spinner-32 README.rst
README.rst

JZoopraxiscope

Animate static image sequenses with this jQuery plugin.

JZoopraxiscope is a jQuery plugin for animations from static images. It is inspired in Eadweard Muybridge's Zoopraxiscope.

Requierements

  • JQuery
  • JQuery UI
  • An image representing the sequese to be animated

Use

  1. Download JZoopraxiscope and link the jquery.jzoopraxiscope.js file in your page:

System Message: ERROR/3 (<string>, line 20)

Error in "code" directive: maximum 1 argument(s) allowed, 3 supplied.

.. code:: html
                <script src="jquery.jzoopraxiscope.js"></script>


2. Link the jQuery and jQuery UI libraries in your page: .. code:: html

System Message: ERROR/3 (<string>, line 26)

Unexpected indentation.
<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>
  1. Prepare the static sequense. Every frame must have the same width and be attached to his previous frame in a horizontal image. Refer to the included file 'media/jzoo.jpg'

----------+------------+------------+------------+ | Frame 1 | Frame 2 | Frame 3 | Frame 4 | +------------+------------+------------+------------+

Horizontal image

  1. Define the options

System Message: ERROR/3 (<string>, line 40)

Error in "code" directive: maximum 1 argument(s) allowed, 18 supplied.

.. code:: javascript
                        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).

System Message: ERROR/3 (<string>, line 60)

Error in "code" directive: maximum 1 argument(s) allowed, 9 supplied.

.. code:: html
                <div id="animation" style="border: 1px solid #999; margin: auto;"></div>


System Message: ERROR/3 (<string>, line 64)

Error in "code" directive: maximum 1 argument(s) allowed, 2 supplied.

.. code:: javascript
                $('#animation').jzoopraxiscope(optionsAnimation);


  1. Control JZoo.

System Message: ERROR/3 (<string>, line 70)

Error in "code" directive: maximum 1 argument(s) allowed, 5 supplied.

.. code:: javascript
                //Play the animation
                $('#animation').jzoopraxiscope('play');

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