Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Readme

  • Loading branch information...
commit f750914ef06686ec9c008601dca743b7a884e8a6 1 parent b243814
@cobalys authored
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.
Please sign in to comment.
Something went wrong with that request. Please try again.