moo.rd is a super lightweight, Object Oriented, modular and flexible Javascript library based on the MooTools framework. It is designed to give many useful and powerful functionalities to the developers which use MooTools. The latest stable release is currently the 1.3.1.
Who's the author?
Riccardo Degni is an italian Web Designer which develops client and server side applications, layout XHTML and relational database managing.
He pays particular attention to either the usability, the design and style, and the standard validation. He likes W3C standards, so his creation try to be as valid as possible. He's a guru of Javascript programming (especially Object Orientation) and likes all about this language. PHP is his server side choice.
Why did i develop moo.rd?
I create moo.rd because i used the MooTools framework into all my projects, and i liked it so much: i like the MooTools syntaxes, the MooTools approaches to Javascript and the MooTools modularity. Other frameworks were full of extensions/plug-ins, so i wanted to give to the MooTool users a new interface that following the MooTools logics. In fact, moo.rd is modular, tiny, extensible and completely OOP.
Another point of the moo.rd creation was me :) I wanted to create something that was extremely useful for all developers (me included, i use a lot of components into many projects) and something that was cool.
What are the coolest features in moo.rd?
First of all: the modularity. moo.rd isn't a "block of code". Through the Download Builder you can select the components you want to include in the final script. The components needed by the files you choose, will be automatically included, so you haven't to manually build your bugless version, is all done by the engine i provided.
For example, if you want to include the cycles, you don't need to include some others plug.in like Table or Customs. Moreover you can include MooTools (full or needed version) into the same script: you can create how many versions of moo.rd as you want. (more details on this article).
Another important feature of moo.rd is the syntax logic. As for MooTools, moo.rd developing follows a modular and OOP way. If i created a function, a Class or a particular method, i'll reuse it throughout the library, there's no double lines or double objects. The result is a code as compact as possible.
Moreover, moo.rd is developed especially for developers: all its classes are extensible, if you want to add your own properties you can.
Let's create an image gallery using moo.rd
With moo.rd you can create three types of image gallery: with the cycles, with the virtual boxes and with the Glider. In this article i'll talk about the cycles and the virtual boxes.
Cycle and Cycles Effects
The cycle and cycles effects are particular slideshows based on a "cycle transition". Cycle means that the slides will be changed in an asynchronous way, while the cycles means that the slides will be changed in a synchronous way. Currently are available about 13 different kinds of cycle transitions and 12 kinds of cycles transitons. Moreover you can create your own with ease.
Declaring a cycle/cycles instance is quite simple, you only need to specify the container's id and the options:
var fx = new Fx.Cycle.foldDown('myElement', {
autostart: false,
duration:4000,
steps: 4000,
handles: {
next: 'nextLink',
prev: 'prevLink'
}
});
As you can see you only need one instance to create a complex slideshow. The handy handles option allow you to set the event handlers for changing to either the next and the previous slide. Now the HTML, an external container and the image you want to see:
// container <div id="myElement"> <img src="1.gif" alt="1" /> <img src="2.gif" alt="2" /> <img src="3.gif" alt="3" /> <img src="4.gif" alt="4" /> </div> // handles <a id="prevLink" href="#">prev</a> | <a id="nextLink" href="next">next</a>
Theres' another way for declaring a cycle/cycles. This is by using either the cycle and the cycles Element's methods:
// turnUp instance
var turnUp = $('myElement').cycles('turnUp', {
duration: 2000,
steps: 4000
});
The two method do extactly the same thing. Moreover, there's a lot of options you can enable: with the goTo method you can create a thumbnails based navigation, with the prev/next arrows you can create an usable gallery, with the autostart sets to true will be a timed slideshow and many more.
The last note before the demo: by using the options' events you can control all the phases of the cycle, as you can see here.
And now the demo i created for Six Revisions: a timed slideshow with a thumbnails based navigation .
Virtual Boxes: Modal Image Gallery
The virtual boxes provide a gallery based on modal boxes. You can either put images (Virtual.Box), ajax content (Virtual.Ajax) and static content (Virtual.HTML) and you can decide if make a collection or single versions.
The setting up is extremely easy: again you only need to declare an instance. One instance for an infinite number of virtual boxes:
var virtual = new Virtual.Box({
enable: {
arrows: true,
closeButton: true
},
effect: 'open',
leftArrowText: 'prev',
rightArrowText: 'next',
closeButtonText: 'close',
captionOpacity: 0.6
});
The effect will be applied to each link which has "virtualbox" as value of the class name property. The caption is created catching the title attribute of link mentioned before, that must be written in the form "title :: content", while the image link is catched from the href attribute.
The markup is extremely easy, too. Create how many "virtualbox" links as you want, and give it an image as child if you want a thumbnails navigation.
<a id="ok1" class="virtualbox" href="img/1.jpg" title="Wonderful Beach :: A wonderful tropical beach">
<img id="img1" src="img/1_little.jpg" alt="1" />
</a>
<a id="ok2" class="virtualbox" href="img/2.jpg" title="Sunny Panorama :: An hot sunny beach">
<img id="img2" src="img/2_little.jpg" alt="2" />
</a>
<a id="ok3" class="virtualbox" href="img/3.jpg" title="Sweet Mountains :: A collection of beautiful mountains">
<img id="img3" src="img/3_little.jpg" alt="3" />
</a>
<a id="ok4" class="virtualbox" href="img/4.jpg" title="Under the sea :: Travelling under the sea">
<img id="img4" src="img/4_little.jpg" alt="4" />
</a>
In the following demo i created a collection of virtual boxes using the images of the previous demo.
Remeber that you can navigate with the keyboard's arrows and close the virtual boxes with the "esc" key, in addiction to the links.
Conclusion
In this article i have explained how to use two of the most apprecciated components of my library. However there's a lot more in moo.rd: check all the demos out and if you need help, open a topic on the forum and post to the blog.
Have fun!