I have recently launched a website for the Bramham Lodge Residential Development in Bramham Village.

The site features a neat Slideshow / Thumbnail Gallery implementation using MooTools and Flash (utilising the Swiff utility of MooTools 1.2).

A demo can be seen on the Bramham Lodge Apartment page.

The SlideShow makes use of Flash to create easily customisable image transition effects that are not possible with JavaScript alone. A collection of MooTools classes are employed to mange the Swiff interface and control the slideshow.

Key Features

• Images are not hard-coded into flash: no need to recompile the SWF when adding/removing or re-ordering the gallery as all data is presented in the XHTML markup.
• Extensible and customisable: The slideshow class makes use of MooTools Events so that add-on classes can be created for bolt-on features whilst being kept separate from the core functionality.
• Accessible: No content is hard-coded into flash, search engines are able to index all the information.

The modular nature of the code and the ability to change the implementation using bolt-on functionality has allowed me to re-use the same set of classes on an upcoming project in a completely different fashion, making use of the great features of Flash without sacrificing indexable content and accessibility.

I always prefer to build websites in valid XHTML as it allows for a stricter, more maintainable envorinment to build websites than traditional HTML. However, there are a few features of HTML I like to make use of.

For example, making links open in new windows using the target attribute is unsupported by XHTML.

(more...)

This guide will show how powerful the MooTools Chain class is. In MooTools chaining facilitates the execution of a stack of functions sequentially and is extremely powerful. I have only tested this in MooTools v1.2 beta 2.

I will be posting more of these short guides on using MooTools in the upcoming weeks. Each will focus on a small problem and solve it with MooTools with the aim of being a useful way to learn the framework.

(more...)

Nick has just released Lightview (another neat project) to the public. Lightview allows you to augment your images. It provides an excellent way of creating a slideshow or simply showing a large version of a thumbnail without resorting to popups. Effects are used to create very appealing slideshows and image galleries.

From the Lightview project site:

• Clean: Designed to compliment your images.
• Fast: Images and their neighbours are preloaded.
• Easy to customize: You don't even have to know CSS.
• Rounded: Adjustable rounded corners, without PNGs.
• Smart resizing: Images will always fit on your screen.
• Slideshow: One button slideshow.
• Effects: Using Scriptaculous.
• Works on all modern browsers

Lightview is similar to Lightbox 2 and both are built with Prototype and Scriptaculous. However, there are a few differences I noticed:

• The morphing effect that Lightview uses is a refreshing change (probably because I have seen the Lightbox effects too many times!).
• Lightview allows you to customise many of the visual aspects of the viewer programatically. For example, the background colour and corner radius.
• Lightview supports a customisable slideshow option which Lightbox lacks.
• Lightview uses the caption attribute of the <a> tag to give images a caption. This attribute is not valid XHTML and thus its usage will produce invalid markup. I would suggest using a convention similar to that used by MooTools Tips: title="image title :: caption"
• Lightbox has been around for a while and is well tested and proven.

Personally I like the look of Lightview but I wouldn't use it because I don't like invalid markup!

If you are interested in something similar for the MooTools framework, try Slimbox.

Whilst I commonly use Prototype and Script.aculo.us as my preferred JavaScript libraries, I recently decided to try out MooTools as an alternative.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API (mootools.net).

I downloaded MooTools version 1.2 beta 1, which is feature complete but not fully tested. If you are interested in what's new in 1.2, see the MooTools blog: 1.2 beta 1.

My first impressions of MooTools were good and whilst I haven't mastered the 'Moo way of doing things,' I got to grips with it quickly.

Comparison with Prototype

This is not an exhaustive comparison, it's just my first impressions.

• In MooTools effects are a Core component. With Prototype you need an additional effects library (e.g Script.aculo.us).
• When downloading MooTools you are able to select only the components you need and you are given the option of compressing the library.
• I prefer Prototype's documentation style. Initially I found MooTools hard to learn because the API documentation does not give sufficient examples of good practice etc...
• I'm a fan of Dean Edward's Base and MooTools has a really nice implementation of it.
• MooTools acknowledges Prototype as an awesome library and a lot of code is based on Prototype.
• Currently there is no central repository for MooTools extensions that I know of.

Prototype 1.6.0 weighs in at 121KB. Similarly, MooTools 1.2b1 (all components, uncompressed, no documentation) is 120KB. However, there is no need for an additional effects library and you can cut down the size of the MooTools library by removing unwanted components.

As I learn more of MooTools I will post more advice and tips on using MooTools from a Prototype background.

Resources

• MooTools.net
• What's new in MooTools 1.2
• Mootools 1.2 Documentation
• MooTools Mocha UI (MooTools/Canvas UI class)