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

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

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

mooMessageBox

This is a simple and plain messagebox class based on mootools, its content comes from a div that you specify. As you can see, you can integrate any kind of html into the box. You can define a lot of things to make your box look the way you want:

• width and height
• attach a CSS class
• add a button and its caption
• add a title bar and its caption
• define the additional
  with contents
• define the fade speed of the box
• define the opacity
• make the box draggable

This box has been tested with Internet Explorer 6/7, Firefox 2.0.0.14, Opera 9.2 and Apple Safari for Windows.

Check the demo: mooMessageBox

mooFlickr widget - display your flickr stuff in an ajax box

If you wish to display your flickr stats in your blog, on your page etc, you’ll need this nifty little widget. It’s capable of retrieving your posted images, information about you on flickr, your most used tags and the user groups you are attending.

There are two versions available - one for HTML documents and one for PHP. Although there are only slight differences, it’s pretty useful if your sites are not dynamic pages.

Have a look at it:
mooFlickr

mooSocialize - ajax based social bookmark widget

Enough of having to submit interesting articles by hand to your favorite social networks and newsgroups? Then this is for you! Never leave your page againto submit your news!

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. Works in IE6/7 ,FF,Opera, Safari

read more | digg story

mooColorFinder - retrieve any html colors from websites

This piece of code reads all color styles from a website - no matter if inline CSS, linked CSS files or imported CSS files. It also finds references to CSS files that are inside i.e. a master CSS file and outputs the colors found as a color cloud.

Demo can be seen here mooColorFinder

moo ImageCrop - crop images with AJAX and PHP

mooImage crop - easy image cropping

Here it is, the worlds first easy-to-implement image cropper. This demo shows you how to use ajax and php functions to create cropped areas from images and return them directly.

This can be come in handy if you wish to let users create avatars from uploaded images with a certain with and height or any other process of cropping images.

Limitations

The demo doesn’t have things included like load image, or save image link generation. This is up to you, that demo should only show what can be archived using ajax and php.

The cropping area is actually hardcoded, but the next release will allow you to scale the box to your needs.

download

If you are interested into this script, then drop us a line!

Demo
AJAX image crop

Next Page »