Magic Zoom^™ Joomla integration

Using the Magic Zoom^™ module for Joomla (separate guide for VirtueMart).

Integration with Joomla 1.5

1. Download and install the Magic Zoom™ Joomla 1.5 content module (trial version).
2. Enable the module.
3. It's ready!
4. Refer to the "Setting up an image zoom" section below to add zooming to an image.

To upgrade to the full version, buy Magic Zoom^™ and upload the mz-packed.js file to this folder: /modules/mod_magiczoom/magiczoom/.

Integration with Joomla 1.0

First, you should install the mod_magictoolbox_tinymce module. This module allows you to insert class and rel attributes for <a> links in the WYSIWYG content editor. (Without it, TinyMCE will remove these attributes by default for some unknown reason).

1. Download mod_magictoolbox_tinymce module.
2. Install it using the Joomla installer menu.
3. Open the module properties (Modules → Administartor Modules → MagicToolbox TinyMCE editor fix).
4. Publish the module.
5. Set the module position to “header”.
6. Refer to the "Setting up an image zoom" section below to add zooming to an image.

(You can skip installing this module if you are happy to completely disable TinyMCE code cleanup: “Mambots” → “Site Mambots” → “TinyMCE WYSIWYG Editor” → “Code Cleanup” = off.)

Now you must install the mod_magiczoom_content module.

1. Download mod_magiczoom_content module (trial version).
2. Install it using the Joomla installer menu.
3. Open the module properties.
4. Publish the module.
5. Set the “Show title” to off.

The trial version is now working! You will see a "please upgrade" message for images larger than 300px.

To upgrade to the full version, buy Magic Zoom^™ and upload the mz-packed.js file to this folder: /modules/magiczoom/.

Setting up an image zoom

Summary of process

1. Add a small image to your content (either by using TinyMCE image wizard or using mos_image extension).
2. Add a link (<a> tag) around the image with the HREF pointing to the big image and a CLASS attribute set to "MagicZoom".

Step-by-step

Open the page you want to add Magic Zoom^™ to.

Either insert the small image using the TinyMCE image wizard:

Or, insert the small image using the mos_image extension. Firstly, upload the small and big images to your Joomla gallery (Site → Media Manager):

Secondly, select your small image using the right menu. Add the {mosimage} tag in your page:

Select the image you just added and click "Insert/Edit link icon" in the editor toolbar:

1. For the HREF attribute, enter the URL of the big image.
   
2. Go to the "Advanced" tab and set the CLASS value to MagicZoom:
   
3. If you would like to add a caption to the image, enter a TITLE of your choice.
4. Click "Insert".

Now save your page, open your website and enjoy your cool new page!

Note: the Joomla plugin for Magic Zoom^™ has been replaced with the Joomla module.

Installation guides

Use Magic Zoom^™ on any website. Download a module/plugin for a specific platform:

Step-by-step instructions	Zip file
Standard instructions (any website)	Download
VirtueMart instructions	Download
Joomla instructions	Download
osCommerce instructions	Download
Drupal instructions	Download
WordPress instructions	Download
X-Cart instructions	Download
xt:commerce instructions	Download
Zen Cart instructions	Download
Gallery instructions	Download
Magento instructions	Download