Browse files

Readme

  • Loading branch information...
1 parent b243814 commit f750914ef06686ec9c008601dca743b7a884e8a6 @cobalys committed Apr 19, 2012
Showing with 70 additions and 1 deletion.
  1. 0 README
  2. +70 −0 README.rst
  3. +0 −1 example/index.html
  4. BIN media/jzoo.jpg
View
0 README
No changes.
View
70 README.rst
@@ -0,0 +1,70 @@
+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:
+.. code:: html
+ <script src="jquery.jzoopraxiscope.js"></script>
+
+
+2. Link the jQuery and jQuery UI libraries in your page:
+.. code:: html
+ <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 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*
+
+
+4. Define the options
+
+.. 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.
+
+
+5. Initialize a div with JZoo (#animation).
+.. code:: html
+ <div id="animation" style="border: 1px solid #999; margin: auto;"></div>
+
+
+.. code:: javascript
+ $('#animation').jzoopraxiscope(optionsAnimation);
+
+
+6. Control JZoo.
+.. code:: javascript
+ //Play the animation
+ $('#animation').jzoopraxiscope('play');
+
+ //Stop the animation
+ $('#animation').jzoopraxiscope('stop');
View
1 example/index.html
@@ -18,7 +18,6 @@
'widthItem' : 380,
'widthImage' : 4560,
'height' : 306,
- 'fadeposition' : -(380 * 120),
'image' : 'images/jzoo.jpg'
}
$(document).ready(function() {
View
BIN media/jzoo.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f750914

Please sign in to comment.