Time to wrap up the year, I think. I released 2 more small plugins of mine on github and the MooTools forge.

mooTagify
GitGub project page: https://github.com/DimitarChristoff/mooTagify
Forge link: http://mootools.net/forge/p/mootagify

A plugin for small tag lists input. Also, provides an ajax auto-completion sub-class that can be used as a standalone anyway.

Screenshot:

Example with ajax tag completion: http://fragged.org/mooTagify/Demo/
The plugin is quite easy to setup and you can style it via CSS only or via the many options available to the 2 classes that run it.

Modal.BootStrap
GitGub project page: https://github.com/DimitarChristoff/Modal
Forge link: hhttp://mootools.net/forge/p/modal_bootstrap

This is a combination of several things: the flexible modal markup experiment by @csuwldcat (Daniel Buchner from Mozila), implemented in the Modal.Base class and the Modal.BootStrap class.

The BootStrpa itself (not to be confused with Twitter’s BootStrap) provides a flexible implementation of content in the Modal window through HTML5 element mark-up only, including support for ajax links, grabbing content from elements on the page or setting pure text, even image support (pseudo-lightbox). It also works with location.hash so you can have page.html#terms_and_conditions as a link, if there’s a matching element managed by the BootStrap instance on the page.html, it will open it automatically for you. The modal will ALWAYS stay in the middle of the screen, it has support for responsive design with minimum width and max width as well as support for CSS3 transitions over js morphing of style properties (if available). Very useful for things like terms and conditions, privacy policies, quick contact forms, questionnaires and so forth. It also has support for buttons in the footer with custom events fired in the instance, so its flexible for scripting.

Screenshot:

Example with location.hash: http://www.fragged.org/dev/Modal/Demo/#interview2

Merry Christmas, everyone and a Happy New Year – unless I release anything in-between.

This was completely overhauled.

Basically, I just released a new mootools modalBox Class called ‘baseBox’. You can see it on jsfiddle and play with it some. Full details, documentation are available on the project github page.

Features:

• Full CSS support – whatever you do, it assigns to the box.
• Complete control – plenty of options, events and instance references for any scripting scenario
• Window nesting / grouping
• Auto toggle when called on the same parent element
• Smart closing through delegation
• CSS3 shadows, gradients out of the box.
• degradation to solid colours and image urls as fallback via CSS
• CSS2D transform support – scale for FireFox, WebKit, IE9, Opera(untested?) via standard Fx.morph!
• degradation via a simple fade when not supported

__VERY_ flexible – should be used as a base to extend. For example, to make a class that Extends baseBox that deals with lightBox-like image only display, here’s all you need to do: baseBox.lightBox.js demo. The lightBox demo is also included in the package and is on GitHub.

Similarly, you can make your own sub-classes, for example, baseBox.Request can work asynchronously to get HTML fragments and show them to the user.

**updated 2-nd May 2011**
This is getting completely overhauled. Basically, I am currently working on a new mootools modalBox Class called ‘baseBox’. You can see it on jsfiddle and play with it some. Full details, documentation and more examples will come when I release it as an official plugin on the MooTools Forge.

largerBox is now deprecated. Read this for more info.

I saw the animation apple do when viewing a trailer (non-HD) on their modal box and decided to replicate the effect for my image viewing in mootools.

Examples of largerBox v3.0 (animations / morphs / tweens don’t work too nice over iframes, mind)

UPDATE – 24/11/2009 largerBox is in the process of being refactored. largerBox v3 – beta 1 is available to look at and play with. It features a totally drag and drop solution – CSS is built into the javascript class, so are the images for next/previous and close. That’s right, there are no files to edit, updated, upload — aside from your images. Check the new source here: /js/largerBox.js

How does it work?
In the normal way, it takes a <a href=’imagename.jpg’> … </a> and attaches itself to the click event, not interfering in any way with your html. All you need to do is add ‘class=”fullimage”‘ to the anchor tag and fraggedBox will do the rest.

What do I need to get this to work?
You need to grab a copy of mootools 1.2.x – core.

You then need to grab the latest beta. Just look at the demo page anyway…