Magic Toolbox

Magic Thumb for Joomla

Joomla module and plugin

Installation instructions for adding Magic Thumb to Joomla general content using the Joomla module for images.

Integration with Joomla 1.5

  1. Download and install the Magic Thumb Joomla 1.5 content module (demo version).
  2. Adjust the module position depending on the design of your Joomla template.
  3. Enable the module.
  4. Now choose an image and enlarge it using the instructions below!
  5. To upgrade to the full version, buy Magic Thumb and upload the magicthumb-packed.js file to this folder: /modules/mod_magicthumb/core/.

Integration with Joomla 1.0

  1. Download the Magic Toolbox TinyMCE module. This lets you 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 it 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 Thumb content module (demo version).
  7. Install it using the Joomla installer menu.
  8. Open the module properties.
  9. Publish the module. The demo version is now working on your website.
  10. To upgrade to the full version, buy Magic Thumb and upload the magicthumb-packed.js file to this folder: /modules/mod_magicthumb/core/.

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

Using Magic Thumb

  1. Open the page where you want to use Magic Thumb.
  2. Either insert the small image using the TinyMCE image wizard or, insert the small image using the mos_image extension.
    1. Upload the small and big images to your Joomla gallery (Site → Media Manager).
    2. Select your small image using the right menu. Add the {mosimage} tag in your page.
  3. 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 MagicThumb.
    3. Add a caption to the image by entering a TITLE.
    4. Click "Insert".
  4. Save your page and you're done!

The HTML code will look similar to this:

<a href="big.jpg" class="MagicThumb"><img src="small.jpg" alt="Your text here"/></a>

Note: the previous Joomla plugin for Magic Thumb has been replaced by the Joomla module.

Other Joomla modules

Installation guides

There are simple instructions plus dedicated modules and plugins to add this JavaScript image popup tool to any website or ecommerce store:

Step-by-step instructions Zip file
Standard instructions (any website) Download
VirtueMart instructions Download 1.5 / 1.1
Joomla instructions Download 1.5 / 1.0
Magento instructions Download
osCommerce instructions Download 3 / 2
Zen Cart instructions Download
X-Cart instructions Download
xt:commerce instructions Download
CubeCart instructions Download
CRELoaded instructions Download
Gallery instructions Download
WordPress instructions Download 6 / 5
Drupal instructions Download
WYSIWYG instructions Download
CS-Cart instructions Download
NetSuite instructions

Buy Magic Thumb

£20
£75
£295

Free trial

Magic Thumb Joomla 1.5 module:
Download Magic Thumb

Magic Thumb Joomla 1.0 and 1.1 module:
Download Magic Thumb 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