jmotion - jQuery plugin

05.Oct.2012  |  Posted by admin  |  Filed under JQuery Plugins

JMotion 1.0.2 is a simple jQuery plugin for animating a sequence of images which saved in a folder. The result shows a Gif-like animations or a Banner rotator.

JMotion works with all versions of jQuery from 1.4. to 1.8

Options:

folder // the url path of the folder where images exist	
type // gif, jpg, png, bmp etc...
amount // how many images? 
pref // if images have prefix such as jm_0, jm_1, jm_2 etc.. 
fade // fading speed from image to another 
speed // how long should a single image stays
width // width of the image
height // height of the image
float //if content after image is float: left, right, center
effect // try one of the shown effects in demo

Usage:

There are 2 ways of using jmotion:

1. Javascript:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="jmotion.js"></script>

   $('#motion').jmotion({ 
	folder:'img',
	amount:9,
	width:250,
	height:250,
	speed:90,
	fade:0,
	float:'left' 
   });
</script>

// the container
<div id="motion"><img border="0" src="img/preloader.gif" /></div>

2. or pure XHTML by adding jmotion-ex.js in the head part and use class="jmotion" in your div tag:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" src="jmotion.js"></script>
<script language="javascript" src="jmotion-ex.js"></script>

// the container
<div class="jmotion" folder="img" pref="im_" width="200" height="200" speed="90" float="left"></div>

See Demo          Download: jmotion.zip

0 Comments

Write a Comment