Oskar Krawczyk – blog.olicio.us

Since officially there’s no PDF docs for 1.2 version, I went ahead and compiled a PDF for both, -core and -more:

Download MooTools 1.2 Documentation in PDF

• MooTools-core 1.2.3 – Single PDF file (6.5 MB)
• MooTools-core 1.2.3 – Multi PDF file, zipped (1.8 MB)
• MooTools-more 1.2.2.3 – Single PDF file (9.8 MB)
• MooTools-more 1.2.2.3 – Multi PDF file, zipped (3 MB)

At some point, I’ll spend some time figuring out how to make a auto-magical converter so the PDF docs are always up-to-date with the ones from docs.mootools.net.

Setting it up

There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

var slides = [
  {
    image: 'photo-1.jpg',
    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'
  },
  {
    image: 'photo-2.jpg',
    caption: 'Excepteur sint occaecat cupidatat non proident'
  }
];
 
$('blinds').floom(slides, {
  axis: 'vertical'
});

<div id="blinds"></div>

The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection. In this scenario the caption is the elements title attribute.

$('blinds').floom($$('#blinds img'), {
  axis: 'vertical'
});

<div id="blinds">
  <img title="Description 0" alt="" src="nature-photo0.jpg" />
  <img title="Description 1" alt="" src="nature-photo1.jpg" />
  <img title="Description 2" alt="" src="nature-photo2.jpg" />
  <img title="Description 3" alt="" src="nature-photo3.jpg" />
  <img title="Description 4" alt="" src="nature-photo4.jpg" />
</div>

Options

All options have default values assigned, hence are optional.

1.1

• Bugfixes
• Removed onFirst and onLast options

1.0

• prefix: (str) class prefix for dynamically created elements. Defaults to floom
• amount: (int) amount of blinds. Defaults to 24
• animation: (int) animation duration for each blind (slice). Defaults to 70
• interval: (int) the interval between slide change. Defaults to 8000
• axis: (str) either horizontal or vertical. Defaults to vertical
• progressbar: (bool) show the progress bar. Defaults to true
• captions: (bool) show the captions. Defaults to true
• captionsFxIn: (obj) extend morph-in
• captionsFxOut: (obj) extend morph-out
• slidesBase: (str) the directory where to look for images/slides
• sliceFxIn: (obj) extend morph-in
• onSlideChange: fires on slide change
• onPreload: fires on slides preload (once, on script initialization)

Download & demo

• Example
• Fork or download from GitHub

Here we go, just add this little piece of code to your website and set the scope of the images you want to preload and fade in. Plus, if there’s an error while loading a specific image you can simply display a pre-set one by using the noImage option.

You can use the selector scope to load all or a certain group of images, ie. img.preload, img[rel=preload], etc.

Possible options

1.0

• noImage: image URL to use when an error occurs (404, broken lit, etc).

new MooImagePreload('#wrapper img', {
  noImage: '404-image.gif'
});

Plus some initial style:

img {visibility: hidden}

• Examples
• Get MooImagePreload-1.0.js (2Kb)
• Requires mootools-1.2.2-core.js and mootools-1.2.2.1-more.js or newer

Possible options

new in 1.3

• [new] toImage: returns the large image instead of a link to flickr.
• [new] onComplete: fires an event when all images are loaded, passing an array of links as reference.

1.2

• apikey: your API key if you have one, otherwise just use the one provided.
• size: the size of displayed photos. Possible values are “s”, “m”, “l”.
• method: the method you want to use, defaults to flickr.photos.getRecent. You can use any public method, such as flickr.photos.search and set the post data using passData.
• amount: the number of photos to fetch and display.
• passData: post data you want to pass with the request when using flickr.photos.search method.
• onProgress: fires an event every time a photo is loaded and passes the image element reference.

new MooFlickrBadge('badge', {
	amount: 18
});

<div id="badge"></div>

• Examples
• Get MooFlickrBadge-1.3.js (2Kb)
• Requires mootools-1.2.2-core.js and mootools-1.2.2.1-more.js or newer

The time to get a new iteration of MooTools couldn’t get here any sooner… No one knows exactly what will the new version bring and no dates are released to the public. One thing we do know is that the selector engine (the very base of every framework) will get updated.

Meantime, in the Selector Engine War, a new player called Sly got promoted to a Colonel rank. Sly is a child of Harald Kirschner (of FancyUpload fame).

The speed result tests are pretty impressive– it’s at least 4x faster than MooTools’ currently embedded selector engine and twice as fast as the base selector engine for the 1.3 release.

And as much as I’d like to see this being included inside MooTools 1.3, the chances for it, are pretty slim. But fear not! If somebody out there, would like to use Sly as the default selector engine in MooTools, here’s how:

Window.implement({
	$$: function(el){		
		return Sly.search(el);
	}
});

Include this snipplet before your code/class/whatever.

This article is outdated. Please visit http://www.jqueryvsmootools.com/ for a great write-up by Aaron Newton.

There is no simple answer to this, or a comprehensive answer that could be contained within the 140 characters that Twitter blesses us with… Well actually I used to reply If you need to ask than your better off with jQuery – but that didn’t worked out.

Both of these wonderful frameworks are significantly different in the approach of how things are being done. Resig’s jQuery by design was directed for people who want to achieve a certain effect with the most minimum code possible. I also have to mention that since jQuery is a widely recognizable project it has a huge community of users behind it, hence an impressive number of available plugins.

Similarly, MooTools can do pretty much the same thing if you really need to, and on top of that it can do a lot more – where it this case Mr. Modularity, Extensibility, Prototypeability (if there’s such a word) are entering the stage. I strongly suggest Aaron Newton’s MooTools Talk from the Ajax Experience (2008), who elaborates on this topic quite significantly.

My framework of choice was MooTools (in the days when it was still called Moo.fx), I have used it in most of the recent projects I’ve been working on and never looked back. It gives me everything I need, beginning with simple element.fade('out') to handling all of the libraries and Engine files I write.

Almost forgot, speed-wise… I could say that MooTools is faster (which it is) but in reality speed differences between these two frameworks are so insignificant that you shouldn’t really be considering them as a point-of-decision. Besides, everything is slow as s*it in IE.

Update

There’s also the second most repeted question How to make MooTools and jQuery work on one page, there’s a simple answer to that– use the noConflict option:

jQuery.noConflict();
 
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
  jQuery("div").hide();
});

More on the subject: Using jQuery with other libraries