mooSlide revamp for mootools 1.1 / mootools 1.2

Update August, 08 2008

Due to many requests to revamp this tool for mootools version 1.2, here you go, the slider is now available for this version, and can be downloaded here.

Finally it's here, the revamp of mooSlideBox - easier to use than ever before, as it now has become a class. There are some options that can influence the look and behaviour of your box. Of course you can also have more than one box on your page! In addition you can now define, from where the box should fly in: from top or from bottom ( sample links show both variants ).

Furthermore you have some nice options, like loading content from other pages that you define, or to execute a function when the slider disappears.

Give it a try:

Toggle slider 1 | Toggle slider 2

The options:

The slider DIV
The slide in speed
The fade out speed
Remove on click yes / no
The final opacity
The height of the slider container
The type of effect used ( see the mootools transitions effects )
The toggler element ( i.e. a link )
Slide from - you can define whether to slide in from top or bottom of the screen

Creating the box:

var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, executeFunction:'sayGoodbye()'});

Autostart the slider on page load:

var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, executeFunction:'sayGoodbye()'});

px.run(); -> this starts the slider automatically.

Options:

toggler is the element that will show / hide the box
content defines the div's ID with your slide contents
executeFunction if you need to execute a JS function after the slider disappears, you can define it with this parameter ( i.e.: executeFunction: 'sayGoodbye()' )
loadExternal if you don't want the slider contents directly on the page, you can use this function to call external html / php files for insertion into the slider
other stuff should be self-explanatory

Compatibility:

This script has been tested in Firefox 2.0.0.14, IE6/IE7, Opera 9.2 and Safari for Windows. If you find any bugs, please drop a mail at admin[at]artviper.net

Download:

Grab your own copy here

visit our homepage

Cuba Libre - Die freie Entfaltung von Rum

mooSlide v2.0 revamp

This is a sample of the new and revamped mooSlide. You can define not only one slider, but more, as it uses js classes. You can define:

The slider DIV
The slide in speed
The fade out speed
Remove on click yes / no
The final opacity
The height of the slider container
The type of effect used ( see the mootools transitions effects )
The toggler element ( i.e. a link )

Cuba Libre - Die freie Entfaltung von Rum

multiple mooSlides on a page

Here you can see that it's possible to call several sliders on one page, just define a new class instance and tell the script which div to use, which handler to use to toggle, and you're all set. The release takes mootools 1.11 as framework, this little class, and not more. Download ? Here

Implementation:

var px = new mooSlide2({ slideSpeed: 1700, fadeSpeed: 500, effect:"linear", toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut });