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 for mootools 1.2

Due to many requests to rewrite the mooSlide snippet for the mootools 1.2 framework we’ve done it, and you can download it right away here:

mooSlide for mootools 1.2

In addition we have added the functionality to load external content instead of having the content div on the page and make it hidden via CSS.

mooSocialize update

The mooSocialize script has been updated. It now takes the url correctly, as there have been an issue when more than one “&” has been in the query string. This bug has been fixed now and the mooSocialize works as expected.

Please re-download your copy here: mooSocialize or get your wordpress plugin here mooSocialize wordpress plugin

mooHorizonSlider

this little slider class is build with the mootools framework 1.11. You can define various things:

* single image movement left / right
* multiple movement left / right
* scroll speed
* image container
* image size

In conjunction with the needed CSS style for the scroller, it creates an easy to use image slider. The slider class can be adjusted to fit your needs perfectly - imageWidth, imageCount, scrollRanges etc.

Check out the source of this page to see how it is implemented. You can also use this line of code, adjust it to your needs, copy the CSS to your file and get it going:

var p = new avScroll({container:’innerScroller’, imgWidth:233, scrollRange:24, leftHandle:’leftClicker’,rightHandle:’rightScroller’, rw:’leftFF’, ff:’rightFF’, speed:700});

Check it out here: moo horizontal slider