HavaLite CMS

A new liteweight Content Management System (CMS)

jmotion - jQuery plugin

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

comments powered by Disqus

0 Comments

    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+

    Social

    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments