MagicToolbox.comImage tools for your website Contact Us

Magic Thumb™ for Joomla


Click to enlarge! It's easy to add this effect to your Joomla website.

Install now!

  1. Download and install the Magic Thumb™ module for Joomla 1.7 / 1.6 content or Joomla 1.5 content (free demo).
  2. Adjust the module position depending on the design of your Joomla template.
  3. Enable the module.
  4. Choose an image and enlarge it using the instructions below.
  5. To upgrade to the full version, buy Magic Thumb™ or request a free non-commercial license. Then upload the magicthumb.js file to this folder: /modules/mod_magicthumb/core/

If you use TinyMCE, you should also perform the following steps (otherwise Joomla strips out id and rev attributes from <a> tags):

  1. Open the TinyMCE 2.0 settings, found in Extensions > Plugin manager > Editor.
  2. Enable the functionality: 'Extended'.
  3. Extended Valid Elements should be: a[class|name|href|target|title|
    onclick|rel|style|id|rev]
  4. Go to Advanced Parameters > Advanced Link and set it to off.
  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 for of this Joomla lightbox module).
  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.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™ (known as a lighbox).
  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>

For help, contact us and we will help you install this image lightbox module on your website. The module was designed for Joomla, the open source CMS.

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

Other Joomla modules

Buy Now1 site license £25

30 day money-back guarantee.
Free license for non-commercial use

Download Joomla 1.6 & 1.7 module Download Joomla 1.5 module Download Joomla 1.0 module

Download a module:



Magic Toolbox on Facebook Magic Toolbox on Twitter Magic Toolbox on GetSatisfaction