mooImageInfoSlider - slide information about the image as bottom-up slider in the image itself

Want to show additional information about an image but you’re no fan of flash to have some nice bottom-up slide implemented? Here you go, a small and easy to use script to show the < > tag of each image in a slider that covers parts of the image.

Adjustable

You can influence the whole thing by defining:

* font-size
* background-color
* slide speed
* slide effect ( Bounce, linear etc )
* background-image

Demo

You can see a live demo here: mooImageInfoSlider

How-To

Simply wrap each image into a DIV with the className .myImages. So this would yield that (X)HTML code for example:
HTML Code

CSS Styles

Here are some styles that are used in the demo:

.myImages{
position:relative;
display:block;
float:left;
margin:0 10px 0 0 ;
}

Script Effects

After that, adjust the settings in the script to match your needs. Find that part, which includes the look and feel of the sliders:

var container = new Element('div', {

In there are all styles like background-image, background color etc.

The effects are done in these parts:

e.addEvent('mouseenter',function(){
and
e.addEvent('mouseleave',function(){


from there you can influence the effects, duration etc. For possible effects please refer to the mootools documentation.

Compatibility

This script has been tested in following browsers

* Firefox 2 / 3
* Internet Explorer 6 / 7
* Opera
* Chrome

Download

Grab your copy here mooImageInfoSlider ( including mootools 1.2 framework and demo page )

mooSlide - revamp!

Done - the new mooSlide is easier to use than ever as it has become a mootools class, with a lot of options that you can influence. The best of it: The slider can contain ANY content, so put videos, flash, images, text or html stuff in it.

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 )

Calling 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 });

whereas the toggler is the element that will show / hide the box, content defines the div’s ID with your slide contents, the rest of the options should be self-explanatory.

Demo:
mooSlide 3.2