Ermintrude is a Prototype(prototypejs.org) + Scriptaculous(http://script.aculo.us) based carousel script. It started out as a port of Fred LeBlanc’s excellent Roundabout for jQuery (http://fredhq.com/projects/roundabout/) to Scriptaculous but I'm going to be looking to extend it in the future to build on what the original provides. I'll also be adding a version for Scripty2 when that gets a bit closer to release status.
You'll need to include the Prototype and Scriptaculous libraries first. The repository includes the latest versions of both but will work with Prototype 1.6.1+ and Scriptaculous 1.8.3+.
Then you'll need to include the ermintrude files. You can either include the basic file
or the full file which includes the extra shapes
Optionally you can include the extra shapes seperately (not sure why you would but hey, it's your party)
Then it's just a case of creating your carousel. The usual html layout for a carousel is this:
<ul id="roundabout"> <li>Apples</li> <li>Pears</li> <li>Raspberries</li> <li>Mango</li> <li>Blackberries</li> </ul>
but you can use other dom elements like divs
<div id="roundabout"> <div>Apples</div> <div>Pears</div> <div>Raspberries</div> <div>Mango</div> <div>Blackberries</div> </div>
Then create your new Ermintrude instance
var ermintrude = new Ermintrude(element[,options]);
Where element is the id of the container, so 'roundabout' in the examples given. Options is an optional element that will specify customisation variables. The full range of options is detailed below.
The main options you will want to customise are (defaults are in square brackets):
- shape -
'lazySusan'- specifies the carousel shape to use
- duration -
600- sets the time the animation takes
- btnNext -
null- specifies a next button to use to control the navigation,
- btnPrev -
null- specifies a previous button to use to control the navigation
- easing -
'sinoidal'- defines the easing type to use for the animation. Uses the Scriptaculous (Transition Types)
- clickToFocus -
true- sets whether clicking the object will cause it to move into focus.
- childSelector -
'li'- defines the type of dom element to be turned into a carousel element. Changed this when using a different semantic layout such as divs.
- activeClass -
'roundabout-in-focus'- class assigned to the currently focused element.
- itemClass -
'roundabout-moveable-item'- class assigned to all elements.
- holderClass -
'roundabout-holder'- the class assigned to the containing element.
- activeClass -
- reflect -
'false'- reverses the order of the elements.
- startingChild -
null- sets the element to be the first focused element. If set to null will focus the first element in the list.
The following options will enable you to alter the shape of the carousel
- bearing -
- tilt -
- minZ -
- maxZ -
- minOpacity -
- maxOpacity -
- minScale -
- maxScale -
- focusBearing -
The following are all the possible shapes you can use:
- lazySusan (default)
For a full range of demos go to (http://oinutter.co.uk/ermintrude/)[http://oinutter.co.uk/ermintrude/].