Joomla! is my favorite CMS. I created a mambot that allows you to easily zoom into images with a beautiful effect. It's called mfFancyZoom 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 it looks really cool, check out the demo below. This script uses the FancyZoom script. Use it totally free for your non-commercial website. If you're running a commercial website, you should buy a license.

• mfFancyZoom Download

Demo with Basic setup

Demo with added caption

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 mfFancyZoom and publish it

How to use

Syntax

Note that you need to remove the underscore (_) from all syntaxes placed on this page. I needed to place the underscore, otherwise it would conflict on this page where the mambot is enabled.

Use the following syntax to enable mfFancyZoom on your images:
{mf_fancyzoom img_name}

The base image path is always: images/stories/mffancyzoom.

The thumbnails should always have the same name as the original and placed in the following folder: images/stories/mffancyzoom/thumbs

For example, I would have an image called "marcofolio.jpg" with the size of 400 x 300 pixels. The thumbnail, also called "marcofolio.jpg" but now with the size of 100 x 75 pixels is placed in the "/thumbs/" folder.

Create the folders mffancyzoom and mffancyzoom/thumbs in your images/stories folder, or else the scipt will not work.

Directory architecture:
images/stories/mffancyzoom/marcofolio.jpg (Original image)
images/stories/mffancyzoom/thumbs/marcofolio.jpg (Thumbnail image)

Your syntax will be: {mf_fancyzoom marcofolio.jpg}

Advanced Configuration

You can set the global parameters, such as the zoomTime, zoomSteps and minBorder, in the mambot settings.

mfFancyzoom has one optional parameter you can set. Separate the parameter with the | symbol.

1. The image location and name. This one has to be used, or else the script will not work.
   Example: {mf_fancyzoom img_name}
2. Adding a caption of the image.
   Example: {mf_fancyzoom img_name|Logo}

Now I would have a fancy zoom image with a caption called Logo.

Only the first parameter must be filled.

Download

• mfFancyZoom Download

Add this magnifier image to your thumbnail files for more user friendly images.

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

This script uses the FancyZoom script. Use it totally free for your non-commercial website. If you're running a commercial website, you should buy a license.

All sample images are from socwall.

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

Changelog

• Bugfix: Now works when installed in subdirectory
• Bugfix: Improved the code

UPDATE

I no longer will update this plugin for Joomla!

Kyle from Pixel by Pixel Group was kind enough to release an upgraded version of this script (thanks!). Take note that I didn't properly test this script!

Download mfFancyZoom 2.0

Download mfFancyZoom 2.1

Words from Kyle:

I edited the .xml file and instructions for my purposes (I have had people here go through some of that backend stuff and then be upset that I did no work and only took from others which "they could have done themselves"). Feel free to edit as you will.

I'm sending 2 zip files. The first v2.0 is hefty in some ways. It requires a db call for every single mffancyzoom image. The second v2.1 takes out a few features to eliminate that db call (makes unchangeable margin values, filenames, and makes the extra "Click to Enlarge" image mandatory).

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