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 )