Introducing Protocycle, an easy way to fade between images

Protocycle is a new plugin for the Prototype JavaScript framework. Use it to fade between different sets of images, paragraphs of text, in fact anything you like.

28th July 2009 published by James Moss

The Prototype framework takes the hassle out of writing non-obtrusive, cross browser JavaScript. By extending the DOM with easy to use methods and classes its easy to create a great user interface or just add a bit of polish to an existing webpage.

In a recent project we needed a way to quickly fade between images just like the jQuery plugin jCycle. After a bit of searching we found there was nothing which matched our requirements.  We needed a simple, lightweight Prototype/ Scriptaculous plugin which didnt need additional CSS files or complex JavaScript and would degrade gracefully.  In the end we wrote Protocycle, based on jCycle, it's probably the easiest way to get a set of html elements fading between one another.

Firstly to see the plugin in action, take a look at the banner images on the Fly Spain website.

It's straightforward to get things working, include the required JavaScript files (prototype.js, scriptaculous.js, protocycle.min.js) in the head of your page and just create an instance of the class inside the ondomready event handler like so:

document.observe("dom:loaded", function(){
    new Protocycle('ul.container');
});

Protocycle will automatically take the first descendants of the element you pass into it and start fading between them. You can pass in a string containing a CSS selector, an array of HTMLElements or a single HTMLElement.

It's also possible to pass an object as a second parameter containing options to customise the functionality of Protocycle, like so

document.observe("dom:loaded", function(){
    new Protocycle('ul.container', {timeout: 6000, speed: 2000});
});

The options in this example tell Protocycle to wait 6 seconds between fades and take 2 seconds to perform the fade animations.  There are other options which can be specified, see the source file for more details. We've tried to keep the names of the options in line with jCycle but to keep things lightweight not everything is supported.

Download Protocycle (minified version) (2kb)

Download Protocycle (full source code) (4kb)

(Protocycle requires Prototype 1.6+ and Scriptaculous 1.8.2+)

Please leave any feedback in the comments below.

Regards, James