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.

One of the needs which arose while building web sites 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. At that time, there was no such solution for Joomla! 1.5, so I decided 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

Since Joomla! 1.5 comes with out-of-the-box support for the mooTools Javascript framework, I decided to use it while building this script. You can download it from the link at 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. For example, if you have a subdirectory images/stories/headerimages, you have to type in headerimages in this field.
• 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 (i.e. no title displayed) 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.