Using moo.rd to Create Image Galleries

Jun 6 2008 by Riccardo Degni | 11 Comments

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.

11 Comments

Neil MacLean

June 7th, 2008

Brilliant. Great stuff Riccardo.
I would like to swap in a call to the Google Ajax Libraries API in there but they only seem to offer mootools 1.1 at the moment. So I don’t suppose I can – um, can I?
Thanks for the demo. Smooth scrolling next time? :-)

RiccardoDegni

June 7th, 2008

Hi Neil, thanks ;)
Currenlty the Google Ajax Libraries API offer only the version 1.1. of MooTools, beacuse the version 1.2 is still being developed (however it’s stable, the team is adding the final features).
moo.rd 1.3.1 is entirely based on the MooTools 1.2, so you can’t, but as soon as the new version is released, you’ll be able to include MooTools from Google and the moo.rd scripts too.

Writing a tutorial for Six Revisions has been a pleasure, so if Jacob want, in the future i could create some others (maybe on smooth scrolling as you suggested) ;)

RD

Selva GK

June 7th, 2008

Gud article , great frame work ! But smooth scrolling is missing !

Jacob Gube

June 7th, 2008

@Neil MacLean: The Google Ajax Libraries API is an excellent service and I can see why you’d want to utilize it; saves you from dropping in a few KB’s plus you can take advantage of Google’s infrastructure to make sure your libraries are always available. It also reduces your maintenance, making sure you’re always using the most current stable release without having to manually update your files.

Yahoo’s! YUI has been doing the same thing for a while and it was what made it stand out… well and plus the comprehensive -ness of it, you also get images and CSS files that you wouldn’t get in a normal JavaScript library; funnily enough the YUI isn’t available in the Google Ajax library.

It’s still a relatively new service, so I’d love some feedback on experience, if any of you folks out there have used it extensively! Additionally, wouldn’t it be cool to see a Google library similar to the YUI? :)

@RiccardoDegni: It’s a pleasure to showcase readers’ projects and I’m always game for anyone wanting to showcase and talk about their work; it gives everyone an update of what’s going on and what’s available besides the popular stuff, and I think it’s also an inspiration to developers to get started on that one project that they’ve been holding off in doing.

With moo.rd, I knew I had to ask you to write about it because I’m big mootools fan and any progression and extension to this wonderful framework is always welcomed by the community. You’re always welcome to write more tutorials here on Six Revisions.

David

June 7th, 2008

FYI moord is dutch for murder, just giving you a heads up.

taylan

June 7th, 2008

Great as visual galleries. But not different others moo works.

Cyan

June 7th, 2008

Great work, moo.rd is amazing as MooTools is! I like so much the galleries you described in the article, plus the other single effects like Move’s and Fade’s. Thanks for sharing with us.

RiccardoDegni

June 8th, 2008

@David: many users have told me about the name of library. I report here what Cristiano wrote in an Ajaxian article: the name is “moo.rd” (muu ar di :) ) and not “moord”. Moreover we don’t speak Dutch.

@Selva GK and Cyan: thanks a lot for your words guys!
@Selva GK: what do you mean about smooth scrolling missing? If you want to try a demo out, here is the right place.

@Jacob Gube: again, i have to express my thank to you. It’s been and will always be a pleasure to write something for Six Revisions, that i consider a must for every Web Designer/programmer.

RD

Selva GK

June 8th, 2008

Riccardo, i mean, if the image rendering is bit more smoother, than it does now ! It will be great :D

deep

August 14th, 2008

I shall be adding this script to http://www.downloadjavascripts.com

seti

June 1st, 2009

can i remove the tinted background? like facebook modal thing?

Leave a Comment

Subscribe to the comments on this article.