Joomla! is my favorite CMS. I created a mambot that allows you to easily add Web 2.0 reflection and tilt images. It's called mfReflex and you can use it free of charge. Use this mambot to give some extra eye-candy to your images. It is very simple to use and uses unobtrusive javascript. Many advanced options are included. You don't need Photoshop or any other advanced and expensive programs to add a Web 2.0 reflection to and tilt images. Use mfReflex and you're ready to go. Additionally, the original image will be kept intact.

• mfReflex Download
• reflex.js Download (required)

Original

Basic setup

{mfreflex beach.jpg}

Advanced configuration

{mfreflex beach.jpg|Beautiful beach||50|1|10|left}

Install

1. Log in to your back-end of the site
2. Go to "Installers", "Mambots"
3. Click on "Browse" and navigate to the downloaded ZIP archive
4. Press "Upload File & Install"
5. Go to "Mambots", "Site Mambots"
6. Search for mfReflex and publish it
7. Download reflex.js
8. UnZIP the archive and only get reflex.js. Upload it to the following folder on your FTP:

   /mambots/content/mfreflex

   Don't forget to read the license of reflex.js.

How to use

Syntax

Use the following syntax to enable mfReflex on your images:
{mfreflex imgpath/img_name}

The base image path is always: images/stories. For example, if you have an image in your images/stories folder, your syntax will be: {mfreflex img_name}

If you have an image in your images/stories/subfolder folder, your syntax will be: {mfreflex subfolder/img_name}

When the user hasn't enabled JavaScript or the browser doesn't support this script, a non-formatted image will be displayed.

Advanced Configuration

mfReflex has a couple of parameters you can set. Seperate the parameters with the | symbol.

1. The image location and name. This one has to be used, or else the script will not work.
   Example: {mfreflex imgpath/img_name}
2. ALT attribute for the image, making it W3C valid. If left empty, no ALT attribute will be used.
   Example: {mfreflex imgpath/img_name|Logo}
3. Float the image to the left or to the right.
   Example: {mfreflex imgpath/img_name|Logo|right}
4. Set the opacity of the reflection in percent (0-100%). Default is 33%.
   Example: {mfreflex imgpath/img_name|Logo|right|90}
5. Set the image border of the image. The reflection will show the border too. Value in pixels, between 0 and 100. Default is 0.
   Example: {mfreflex imgpath/img_name|Logo|right|90|5}
6. Distance between the image and the reflection. Value in pixels, between 0 and 100. Default is 0.
   Example: {mfreflex imgpath/img_name|Logo|right|90|5|10}
7. 3D Z-tilt of the image. Choose between right, none or left. By default, the script rotates through the tilt variations.
   Example: {mfreflex imgpath/img_name|Logo|right|90|5|10|none}

Now I would have a reflex image with an ALT attribute called "Logo", floating on the right, with a reflection opacity of 90%, a border of 5 pixels, with a distance of 10 pixels between the image and the reflection and with no Z-tilt.

Only the first parameter must be filled. All others are optional. If you don't want to use the parameter, leave it empty. For example, if you want all default settings, but another Z-tilt, use the following syntax:
{mfreflex imgpath/img_name||||||none}

Download

• mfReflex Download

Don't forget to download mfSyntaxHelper if you need some help with the difficult syntax from this mambot.

Ed from Digital Access USA took the time to create a JCE plugin to help you with the syntax.

• JCE mfReflex Plugin Download

The sample image is from socwall.

Feel free to give feedback about this mambot. Enjoy using it!

Changelog

• Removed script from Christian Effenberger due to copyright restrictions. You can still download the script at his website.
• Added a couple empty "index.html" files for no directory listing.
• Default settings can be placed. Go to the mambot and set your own default settings.

• Script doesn't work when Joomla! is installed in a subdirectory.

• Bugfix: Now works when installed in subdirectory
• Bugfix: Altered code to remove the "Stack Overflow" error from IE7

Interested in this topic? You might enjoy another article I've written called

• Exclusive: Free CMS icon set
• Freebies: "Ancient stones" High resolution textures
• Best of the Best: 2009
• Sweet tabbed navigation using CSS3
• Planet Collision: Free November 2009 Calendar Wallpaper