In this article we display some of the great and interactive Ajax effects scripts and examples with Mootools scripts. Look at these scripts and use them on your website to make them interactive. All scripts come with demo and instructions and are easy to use and implement.

Milkbox

Milkbox - Lightbox for Mootools 1.2.1 with Xml and Flash/Swf support

(E)2 Photo Gallery

(E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.

Pathfusion : Slideshow

Fade, Slide and Wipe transitions, loops, Play, Stop, Next and Previous controls, Inits from array of image src’s, a list of images on the page or using the href of an a tag like the lightbox

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

Slimbox

Slimbox is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the compact MooTools javascript framework. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

BarackSlideshow

Inspired by the slideshow in Barack Obama website. Implemented by extending MorphList

SqueezeBox - Expandable Lightbox

SqueezeBox is an unobtrusive LightBox inspired overlay, for modal boxed content on your site. It’s a snap to show images but just as easy to use HTML elements, Ajax requests, iFrames, SWF movies and more.

MediaBox

Using the MooTools 1.11 javascript library, Mediabox lets you open flash, video, and html content in a floating “lightbox” style window. Mediabox will read Flickr, Google, MetaCafe, MySpace, Revver, YouTube, Veoh, Viddler, and Vimeo links by automatically translating them into embed code and inserting the video into the lightbox style effect.
Flash animation, flash video, quicktime, windows media, inline content, and external html content is all automatically recognised as well. Every link listed below is shown with the code used to make it.

Sliding Tabs

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store. It’s actively tested this in Safari 3, Opera 9, IE 7, and Firefox 2.

Mootabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
As of version 1.2, you can also set tab content via an Ajax request. See the documentation below for more info!

SimpleTabs - Unobtrusive Tabs + Ajax (v1.0)

Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.

FormCheck

Validation: On leave a field, On submit the form
Display: Show errors on tips over the field, Display only one tip at once, Tips don’t flash on submit if errors remain, Ability to close tips

fValidator

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.

FancyUpload - Swiff meets Ajax

Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

UI TESTS :: Drop Menu

Mootools Javascript Examples (v1.2b) :: UI TESTS :: Drop Menu

MenuMatic - Drop Down Menu

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Fancy Menu

For this menu, as we’ll be having a movable element that acts as the background, we should first make sure that just by using css, we can freely move it and that it won’t affect the display of the menu. If you didn’t do this, when you’re coding the JS and face a bug, you’ll find yourself wondering if it is caused by the CSS, the Javascript, the browser?

Calendar (date picker)

Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers I have implemented over the years and has been completely re-written for Mootools. I have tried to include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Use the links below to see what features are available in Calendar and how it might enhance the accessibility, usability and validation of form elements on your website.

Another date picker

Mootable

Autocompleter

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Tipsx3

iCarousel

iCarousel is an open source (free) javascript tool for creating carousel like widgets.

MooSocialize

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking. But that’s not all - it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.

Pathfusion : Rounded Corner

javascript and flash development. creates rounded corners on divs.

Share this article!

Share it your friends & colleagues and help us spread it to the World.