Using moo.rd to Create Image Galleries

Editor’s note: This is a guest post from Riccardo Degni, an Italian Web Designer who develops client and server side applications.

He’s here to talk about his latest project – moo.rd – a JavaScript library based on the MooTools framework, as well as walk us through the steps of creating image galleries using moo.rd.

moo.rd - Virtual Box Screenshot

Overview

moo.rd is a super lightweight, Object Oriented, modular and flexible Javascript library based on the MooTools framework. It’s designed to give many useful and powerful functionalities to developers who use MooTools. The latest stable release is currently 1.3.1.

Why did I develop moo.rd?

I created moo.rd because I used the MooTools framework in all my projects and I liked it very much. I like the MooTools syntax and its approach to Javascript and modularity. Other frameworks were full of extensions/plug-ins, so I wanted to give MooTools users a new interface that follows the MooTools logic.

In fact, moo.rd is modular, tiny, extensible and completely OOP. I wanted to create something that was extremely useful for all developers (me included, I use a lot of components in many projects) and something that was cool.

What are the coolest features in moo.rd?

First of all: 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 automatically be included for you.

For example, if you want to include the cycles, you don’t need to include some other plugin like Table or Customs. Moreover, you can include MooTools (full or needed version) in the same script; you can create as many versions of moo.rd as you want. (more details on this article).

Another important feature of moo.rd is the syntax logic. Like MooTools, development with moo.rd follows a modular and OOP way. When a function, a class, or a particular method is created, it’s reused throughout the library; there’s no double lines or double objects. The result is code that’s as compact as possible.

Additionally, moo.rd is developed for developers: all its classes are extensible, if you want to add your own properties you can.

Creating an Image Gallery

With moo.rd you can create three types of image galleries:

  1. cycles
  2. virtual boxes
  3. 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 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 there’s about 13 different kinds of slide transitions and 12 kinds of cycles transitons, but 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 allows you to set the event handlers for changing to either the next or 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>

Another way for declaring a cycle/cycles 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 methods are extactly the same. 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 a usable gallery, with the autostart set to true it will be a timed slideshow… and many more.

By using the options’ events you can control all the phases of the cycle, as you can see here.

A timed slideshow with a thumbnails based navigation demo

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 you want a collection or single images.

Setting up is extremely easy. Again, you only need to declare an instance. One instance for any 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 with the title attribute of the link and written in the form "title :: content", while the image link is generated from the href attribute.

The markup is extremely easy, too. Create however many "virtualbox" links you want and give it an image as its child element if you want to use thumbnail 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>

Virtual Boxes demo

Remember that you can navigate with the keyboard’s arrows and close the virtual boxes with the "esc" key, in addition to the links.

Conclusion

In this article, I explained how to use two of the most appreciated 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!

Downloads

  • moord_demo.zip – all assets related to this tutorial for you to use or study.