Magic Toolbox

Magic Zoom for Joomla

Try it Magic Zoom reveals a very detailed image when the mouse is moved over a smaller image.

Joomla moduleAdd it to your Joomla 1.5 or Joomla 1.0 website using the module below. Or use it on VirtueMart.

Joomla 1.5 instructions

  1. Download and install the Magic Zoom™ Joomla 1.5 content module.
  2. Enable the module.
  3. The demo version is ready to use!
  4. Follow the instructions below: "Setting up an image zoom".
  5. To upgrade to the full version, buy Magic Zoom and upload the mz-packed.js file to this folder: /modules/mod_magiczoom/core/.

Joomla 1.0 instructions

  1. Download the Magic Toolox TinyMCE module. This will allow 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).
  2. Install the module using the Joomla installer menu.
  3. Open the module properties (Modules → Administrator Modules → MagicToolbox TinyMCE editor fix).
  4. Publish the module.
  5. Set the module position to "header".
  6. Download the Magic Zoom content module (demo version).
  7. Install it using the Joomla installer menu.
  8. Open the module properties.
  9. Publish the module.
  10. Set the “Show title” to off.
  11. That's all! Now follow the instructions below to set-up an image zoom.
  12. To upgrade to the full version, buy Magic Zoom and upload the mz-packed.js file to this folder: /modules/mod_magiczoom/core/.

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 where you want to use Magic Zoom.

Joomla zoom

Insert the small image using the TinyMCE image wizard:

Insert image using 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):

Insert image using mos_image extension

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

Select your small image

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.
    Enter the CLASS
  2. Go to the "Advanced" tab and set the CLASS value to MagicZoom:
    Enter the HREF
  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 Joomla zoom!

Zoom Joomla images!

Note: the Magic Zoom Joomla plugin has been replaced with a Joomla module.

Other Joomla modules

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 1.5 / 1.0
Joomla instructions Download 1.5 / 1.0
Magento instructions Download
osCommerce instructions Download 3 / 2
CRE Loaded instructions Download
X-Cart instructions Download
xt:commerce instructions Download
Zen Cart instructions Download
CubeCart instructions Download
Drupal instructions Download 6 / 5
WordPress instructions Download
Gallery instructions Download
WYSIWYG instructions Download
CS-Cart instructions Download
NetSuite instructions

Buy Magic Zoom

£25
£95
£395

Free trial

Magic Zoom™ Joomla 1.5 module:
Download Magic Zoom for Joomla 1.5

Magic Zoom™ Joomla 1.0 module:
Download Magic Zoom for Joomla 1.0

Free license

For non-commercial sites:

Apply for free license

©2009 Magic Toolbox   About  |  Contact  |  Support  |  Affiliates  |  Newsletter  |  Testimonials  |  License Agreement  |  Terms  |  Privacy