mooCase

Example 1 (defaults)

Example 2

With mooCase you can create your own showcase with the animated fade effect between the items. Multiple instances can be created in one page. The navigation bar allows the user to manually navigate between the items. When the mouse leaves the navigation bar, the fade effect will continue. The installation is quick and simple and the options lets you create an unique mooCase with a own look & feel.

• Download Mootools core.
• Download the mooCase javascript file.
• Include both files inside your website document.
• Create a new instance for your mooCase by adding the following code to your javascript header:

  var example1 = new mooCase('example1');

• Customize mooCase to your own wishes.

• elements (elements): Classname of the element(s) for mooCase (must be an ul).
• togglers (togglers): Classname of the togglers UL.
• activeClassName (active): Name of the class which must be applied at mouseenter.
• timer (5): Amount of seconds to show an item.
• speed (10): Transition speed, less is faster.
• transition (Fx.Transitions.Quart.easeOut): Transition effect.

• Mootools 1.2: the first version of mooCase is created with Mootools 1.2. So you'll need this version or later.

Mootools 1.2.1 Core YUI compressed, only with needed components!

mooCase v1.1 YUI compressed

mooCase v1.1 no compression, for developers use

• 15 september 2008, version 1.1: You can now create multiple instances of mooCase and the flicker effect at the mouseenter/-leave are history.
• 7 september 2008, version 1.0: First release.