moodular - not another jQuery carousel/slider plugin

What is the moodular ?

Moodular is a jQuery plugin which allows to create carousel/slider very easily. Moodular comes from the contraction of two words : mood & modular.
- Mood for many reasons, "in the mood - Glenn Miller", ...
- Modular because this plugin has some modules integrated (controls & effects).
It's modular too, cause you can create your own controls & effects to perform your personal carousel.

Moodular can work with flexible width & height, with every html tag.

Due to a refactoring, some effects & controls are in refactoring too. So, you can repport bug on contact.

Download
Core - Controls - Effects

Follow me on github : git://github.com/gouz/moodular.git

How is the moodular simple ?

Its basic use is the code bellow.

jQuery("#myCarousel").moodular();

Demonstration

For all the demos, the CSS which is used is :

.demo ul, .demo li {
	margin: 0;
	width: 900px;
	height: 495px;
	list-style: none;
}
.demo li { 
	float: left;
}

The javascript code change each times

jQuery('#main_demo ul').moodular();

Vertical movement

jQuery('#vertical_demo ul').moodular({
	direction: 'top'
});

Launch the script

Vertical movement with easing

Require jQuery easing plugin : http://gsgd.co.uk/sandbox/jquery/easing/

jQuery('#easing_demo ul').moodular({
	direction: 'top',
	easing: 'easeOutBounce'
});

Launch the script

Start on the third image.

The third item is the number 2 (0, 1, 2, ...)

jQuery('#starton_demo ul').moodular({
	startOn : 2
});

Launch the script

Control with navigation system.

jQuery('#navigation_demo ul').moodular({
	controls : 'index',
	auto: false
});

Additionnal CSS for the navigation

.moodular_itemList, .moodular_itemList li { 
	width: auto; 
	height: 30px !important; 
	list-style: none; 
}
.moodular_itemList li { 
	margin: 2px 4px; 
}
.moodular_itemList li.active { 
	font-weight: bold; 
}

The reflection effect.

jQuery('#reflection_demo ul').moodular({
	effects : 'reflection'
});

Launch the script

The touch control.

jQuery('#touch_demo ul').moodular({
	controls : 'touch',
	auto: false
});

Work with iPhone / iPad & Android !!!.

Launch the script

API uses.

var mood = jQuery('#api_demo ul').moodular({
	auto: false,
	api: true
});

jQuery('#api_demo a.next').bind('click', function () { mood.next(); return false; });

Launch the script

Callback uses.

function hasMoved(moodular) {
	alert("I've moved to item number " + moodular.current);
}
var mood = jQuery('#callback_demo ul').moodular({
	auto: false,
	callbacks: [hasMoved],
	api: true
});
jQuery('#callback_demo a.next').bind('click', function () { mood.next(); return false; });

Launch the script

Fading effect.

jQuery('#fading_demo ul').moodular({
	effects: 'fade',
	controls: 'index', 
	auto: false
});

Launch the script

stopOver Control.

jQuery('#stopOver_demo ul').moodular({
	controls: 'stopOver'
});

Launch the script

Documentation

The moodular function can have many parameters to custom the render.

Parameter	Type	Default	Description
`item`	string	`li`	This parameters allow to specify what kind of tag are the items.
`auto`	boolean	`true`	If true, the moodular is auto-animated.
`controls`	string	`'button'`	A string which contains all the controls we want, separated with a space character. Example : `'keys button'`.
`effects`	string	`''`	A string which contains all the effects we want, separated with a space character. Example : `'fade corner'`.
`easing`	string	`''`	A string which contains the easing effect we want. Example : `'easeOutBounce'`.
`continuous`	boolean	`true`	If true, the moodular will be continuous, else it will be stoped at the end of the element.
`move`	function	`included in the core`	You can override the move function, this function has 2 parameters : moodular and the callback function you must call after the animation. The number of elements which will be moved is getted by moodular.dep (if this number is negative => prev, else => next)
`speed`	integer	`2000`	The duration in ms of the animation.
`direction`	string	`'right'`	The direction of the animation. 'top' and 'bottom' create a vertical moodular. 'left' and 'right' create a horizontal moodular.
`scroll`	integer	`1`	The number of scrolling elements.
`dispTimeout`	integer	`1000`	The delay in ms between two animations.
`startOn`	integer	`0`	The number of the start element.
`callbacks`	array of functions	`[]`	It allow to create some callbacks called at the end of an animation.
`api`	boolean	`false`	It provide an api for external call of some methods (next, prev, getCurrent, moveTo).
`random`	boolean	`false`	Randomize the item in the carousel.

Example of a call with parameters :

var moodular = jQuery("#myCarousel").moodular({
	controls	: 'keys ',
	effects		: 'reflection',
	speed 		: 500,
	dispTimeout	: 1000,
	auto		: false,
	api		: true
});

The example shows how to use the api. Then now, you can control your moodular with external actions.

The example bellow is used for the demonstration of this page.

jQuery('#next').click(function () { 
	moodular.next(); 
	return false;
});
jQuery('#prev').click(function () { 
	moodular.prev();
  return false; 
});
jQuery('#start').click(function () { 
	moodular.start();
  return false; 
});
jQuery('#stop').click(function () { 
	moodular.stop();
  return false; 
});
jQuery('#getcurrent').click(function () { 
	jQuery('#current').val(moodular.getCurrent());
	return false;
});
jQuery('#moveTo').click(function () { 
	moodular.moveTo(jQuery("#move").val());
	return false;
});

Methods

The methods with an underscore "_" are for internal uses. So, the methods we must use for the api are :

next
prev
start
stop
getCurrent
moveTo

Method	Argument	Return	Description
`_init`	void	void	Initialization of the moodular
`_animate`	string	void	The argument is the direction ('prev' or 'next') of the animation.
`_beforeMoving`	void	void	The "beforeEffects" are launched in this function.
`_move`	void	void	The "move" function, can be override.
`_afterMoving`	void	void	The "afterEffects" are launched in this function.
`_realpos`	integer	integer	Return a calculted position.
`start`	void	void	Start the moodular in automatic mode.
`stop`	void	void	Stop the moodular.
`next`	void	void	Animated to the next element.
`prev`	void	void	Animated to the previous element.
`getCurrent`	void	integer	Return the current position.
`moveTo`	integer	void	Move to the given position.

Controls

Just one control is embedded in the core. It's the 'button' control. It displays the default button.

An external file is available with some controls :

index : display a list of number from 1 to the count of items ;
keys : allow to navigate into the carousel with the direction's keys ;
click : on click on an element, this element becomes the current element ;
wheel : allow to navigate into the carousel with the mouse's wheel ;
touch : allow to navigate into the carousel with your finger ;
slider : allow to navigate into the moodular with a jQuery UI slider.
stopOver : allow to stop the carousel when the mouse is over.
tabs : allow to navigate into the moodular with an external navigation (using #) (example coming soon).

Effects

An external file is available with some effects :

corner : item are rounded ;
reflection : each item have a reflect ;
fade : fading transition ;
zoom : zooming transition ;

For Developers

Each extensions you'll write have one argument : moodular which is the jQuery representation of the moodular.
Just two kind of extensions have two arguments : effects.before and effects.after.

Controls

If you want to create your own control you have just to extend the $.fn.moodular.controls and allow it in the 'effects' argument.

For extend the controls you have to write your function like this :

jQuery(function($){
	$.extend($.fn.moodular.controls, {
	    myKeys: function(moodular){
	        $(document).keydown(function(event){
	            if ((event.keyCode == 39) || (event.keyCode == 40)) {
	                moodular._animate('next');
	            }
	            if ((event.keyCode == 37) || (event.keyCode == 38)) {
	                moodular._animate('prev');
	            }
	        });
	        return false;
	    }
	});
	// for callbacks
	$.extend($.fn.moodular.controls.callback, {
	    myKeys: function(moodular){
	        console.log(moodular.current);
	    }
	});});

and apply your control with :

jQuery("#myCarousel").moodular({
	controls	: 'myKeys slider',
	effects		: 'reflection',
	speed 		: 500,
	dispTimeout	: 1000,
	auto		: false,
	api		: true
});

Effects

There are three types of effects :

init : this effects are applied at the initialization ;
before : this effects are applied before the animation ;
after : this effects are applied after the animation.

Each types of effects can be extended like the controls.
So you have to write your extension like this :

jQuery(function($) {
	$.extend($.fn.moodular.effects.init,{
		myFunction : function (moodular) {
			alert('Hello');
		}
	});
});

or like this

jQuery(function($) {
	$.extend($.fn.moodular.effects.before,{
		myFunction : function (moodular, direction) {
			alert('Hello, I\'ll move to the ' + direction);
		}
	});
});

and apply your effect with :

jQuery("#myCarousel").moodular({
	controls	: 'keys slider',
	effects		: 'reflection myFunction',
	speed 		: 500,
	dispTimeout	: 1000,
	dispNumber	: 5,
	align		: 'center',
	auto		: false,
	api		: true
});

Move

This is an example of a custom move function :

function myMove(moodular, callback) {
	var next = 0;
	if (moodular.dep < 0) {
		if (moodular.current == 0) {
			next = (moodular.nbItems / 2) - 1;
		}
		else {
			next = moodular.current - 1;
		}
	}
	else {
		if (moodular.current == (moodular.nbItems - 1)) {
			next = 0;
		}
		else {
			next = moodular.current + 1;
		}
	}
	moodular.aItems.css({
		'z-index': 2,
		'position': 'absolute'
	}).css(moodular.pos, 0 - (moodular.vertical ? moodular.block.height : moodular.block.width)).show();
	moodular.aItems.eq(moodular.current).css('z-index', 1).css(moodular.pos, 0);
	if (moodular.vertical) {
		moodular.aItems.eq(next).animate({
			'top' : '0px'
		}, moodular.opts.speed, function(){
			moodular.aItems.eq(moodular.current).hide();
			callback();
		});
	}
	else {
		moodular.aItems.eq(next).animate({
			'left' : '0px'
		}, moodular.opts.speed, function(){
			moodular.aItems.eq(moodular.current).hide();
			callback();
		});
	}
}

and the call :

var moodular = jQuery("#myCarousel").moodular({
	controls	: 'keys',
	speed 		: 1000,
	dispTimeout	: 1000,
	direction	: 'left',
	move		: function (c, b) {myMove(c,b);},
	auto		: false,
	api		: true
});

Browser Support

jQuery moodular is tested in Safari, Firefox 1.5+ , Internet Explorer 6+, Opera 9 and Chrome.

Moodulator

The moodulator is a generator and a tester for the plugin.

The HTML code is :

<ul>
	<li><img src="img/photo1.jpg" /></li>
	<li><img src="img/photo2.jpg" /></li>
	<li><img src="img/photo3.jpg" /></li>
	<li><img src="img/photo4.jpg" /></li>
<ul>

The CSS is :

#myCarousel { 
	margin:0;
	padding:0;
	height:75px;
}
#myCarousel li {
	width:930px;
	height:75px;
	list-style:none;
	float:left;
	position:relative;
}

COMMING SOON

Contact

Twitter : http://www.twitter.com/gouz

Mail : sylvain.gougouzian@gmail.com

Moodular!

What is the moodular ?

How is the moodular simple ?

Demonstration

Vertical movement

Vertical movement with easing

Start on the third image.

Control with navigation system.

The reflection effect.

The touch control.

API uses.

Callback uses.

Fading effect.

stopOver Control.

Documentation

Methods

Controls

Effects

For Developers

Controls

Effects

Move

Browser Support

Moodulator

Contact