Class mooslides

Represents a mooslides object
Defined in: mooslides-1.0.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	mooslides(outterdiv, options) Construct a new mooslides object.

Method Summary
Method Attributes	Method Name and Description
	changed(newPanel) Changed event.
	loopStart() Starts the animation.
	loopStop() Stops the animation
	panelClicked() panelClick event.
	slideFirst() Slides to the first panel
	slideLast() Slides to the last panel
	slideNext() Slides to the next panel
	slidePrevious() Slides to the preview panel
	slideTo(panelId) Slides to the specified panel
	warpTo(panelId) Similar to slideTo but does it without an animation.

Class Detail

mooslides(outterdiv, options)

Construct a new mooslides object. Make sure that your outterdiv already exists and has been inserted in the DOM. (i.e. create a new mooslide in the window.domready event.

	// Creating a new mooslides.
	var myslides = new mooslides('mydiv', {
		customToolbar: false,
		toolbarStyles: myStyles
	});
	
	// an example CSS style that makes a pretty toolbar
	li.toolbar-button {
		display: inline;
		background-color: #262626;
		padding: 2px 5px;
		color: #ddd;
		cursor: pointer;
	}

Parameters:
{String} outterdiv: Your main div
{Object} options: A set of options (described below)
Options
{bool} options.customToolbar Optional, Default: 'false': Set to true if you plan on using your own toolbar. If you do, you will have to come up with your own Next, Previous, ..., buttons. You can use the slideTo(), slideNext(), slidePrevious(), slideFirst() and slideLast() functions to help you out.
{Fx.Transitions} options.transitionEffect Optional, Default: 'Fx.Transitions.Expo.easeOut': An Fx.Transitions object that will be used when switching panels.
{Int} options.animationDelay Optional, Default: '4000': Number of milliseconds to wait between panel switching in animation mode.
{bool} options.autoStart Optional, Default: 'false': Set to true if you want the animation to start when the page is loaded.
{String} options.buttonClass Optional, Default: 'toolbar-button': If you want to use the default toolbar, you can specify a custom class that will be applied to the toolbar's buttons. This is only so you can control the styles of the toolbar. Checkout the example abouve, it contains a basic style that should get you started.

Method Detail

{Int} changed(newPanel)

Changed event. This is mostly for internal use. Note that it fires a "changed" event on the main div. You can catch this event. The id of the newly selected panel will be passed as an argument to your callback function.

Parameters:
newPanel

Returns:: {Int} The id of the newly selected panel.

loopStart()

Starts the animation. Panels will change at the interval specified in options. When it reaches the last panel, it will quickly go back to the first panel.

Example:

	myslides.loopStart();

loopStop()

Stops the animation

Example:

	myslides.loopStop();

{Int} panelClicked()

panelClick event. This is mostly for internal use. Note that it fires a "panelClick" event on the main div each time a panel is clicked. It will send the panel id of the clicked panel to your callback function.

Returns:: {Int} The id of the newly selected panel.

slideFirst()

Slides to the first panel

Example:

	myslides.slideFirst();

slideLast()

Slides to the last panel

Example:

	myslides.slideLast();

slideNext()

Slides to the next panel

Example:

	myslides.slideNext();

slidePrevious()

Slides to the preview panel

Example:

	myslides.slidePrevious();

slideTo(panelId)

Slides to the specified panel

Example:

	myslides.slideTo(0) // slides to the first panel

Parameters:
{Int} panelId: The id of the panel to scroll to. (zero-based)

warpTo(panelId)

Similar to slideTo but does it without an animation. This means you will move instantly to the specified panelId

Parameters:
{Int} panelId: The id of the panel to warp to. Zero-based.

Classes

Class mooslides