I have often mentioned the virtues of Joomla! CMS. It is a fully featured, extensible and versatile Open Source content management system written in PHP. Its ability to adapt to individual needs made it an invaluable asset in my web design endeavors, leading me to even start developing a backup component for it.

I had been building the website for my former employer. One of the needs which arose was this for dynamically rotating images in the header. The concept was very simple indeed: a section of the header was reserved to display one image at a time. After a specified timeout, the image would cross-fade to another image of a predefined image set. This is the very concept for fading image rotators.

To my surprise, nobody had ever such a script for Joomla! 1.5! There had been some really great modules for the older Joomla! 1.0.x which, unfortunately, refused to work. There were even some half-baked attempts to create such a module for Joomla! 1.5, but using them on my site proved to be impossible. Disappointed by this situation, I set off to "roll my own".

New version 1.1 (November 2008) fixes problems related to DOM not being initialized on startup and when jQuery was being used on the same page. Kudos to Manolis Andreadakis for the patch

I don't have words to express how much I was impressed by the simplicity of building such a module! Joomla! 1.5 comes with out-of-the-box support for the excellent mooTools, which proves to be truly invaluable for building such a module, as it cuts down the need to write JavaScript by a significant amount. In less than one hour I had a flexible module ready for production use. You can download it from the bottom of this page. It is very simple in operation: it scans a subdirectory of images/stories for BMP, JPG, GIF and PNG files and displays them in a cross fading slideshow.

Its parameters are also very simple and almost self-explanatory:

• Suffix. The standard Joomla! parameter for adding a suffix to the module code.
• Unique ID. Set it to something unique if you want multiple image rotators to be present on the page at once.
• Image folder path. Enter the name of the subdirectory of images/stories which will be scanned for image files.
• Rotation speed. How many seconds the cross fade will last.
• Rotation timeout. How many seconds an image will remain on screen before the cross fade to the next image starts.
• Image width. All images will be scaled to this width (in pixels).
• Image height. All images will be scaled to this height (in pixels).
• Image opacity. The final opacity of each image rendered. Use 100 for opaque images. 0 is totally transparent (and is of no use, of course). Using a value around 20 to 25 with grayscale images will make them blend to the background quite nicely.
• Display mode. The image rotation DIV can be floated right, floated left or display as a block (fixed on a specific spot with the rest of the text). Using one of the float attributes with a headerless module on a very wide header section will let you create interesting effects.

And, of course, this module is licensed under the terms of the GNU General Public License, version 2 or later.