mooImageInfoSlider for mootools 1.2

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 <<alt>> 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

<div class="myImages"><img src="becher_small.jpg" alt="choose caption"/></div>
<div class="myImages" ><img src="candle_small.jpg" alt="add text to it" /></div>

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 )

 

Surftipps