MagicToolbox.comImage tools for your website Contact Us

Magic Thumb™

Magic Thumb™ is a fantastic way to enlarge thumbnail images using a JavaScript lightbox effect.


Click an image...

You can place text here to describe the image. Over 40 [a href="/magicthumb/integration/"]customisation[/a] options are available. [a href="/magicthumb/examples/"]Try these examples[/a]. Download one of the 20 modules for shopping carts such as Magento and VirtueMart.



Try more examples. See the installation instructions.


Features

  • Enjoyable – feels good to use.
  • Easy – add it to your website in minutes.
  • Fast – large image downloads after everything else.
  • Accessible – if JavaScript is disabled, the large image opens as link.
  • Customisable – change the speed, size, visual effects, text, buttons, cursors, borders... 11 great examples.

Integration – see the installation instructions and the customisation options.

No pop-up – the user stays on the same page – there are no new windows or pages loaded, it just smoothly loads in the same page on click.

Immediate – people like the web 2.0 lightbox enlarge effect. It is immediate – the large image enlarges on click without waiting for it to download. This gives a better experience than waiting (as with an AJAX lightbox that requests images on demand).

Beautiful images – you can display an unlimited number of images on a page. Large images have large file sizes, so be sure to compress your images with a good ratio of size to quality (aim for a JPEG filesize of 30-70kb). You can use JPEG, PNG or GIF.

Requirements – two images are required for Magic Thumb™ – one large image (about 450-550 pixels height) and one thumbnail image (about 80-120 pixels height).

�ompatibility

Like all our tools, Magic Thumb™ is XHTML compliant, CSS compliant, WAI Priority 3 compliant (AAA). It works in all modern browsers and many old ones too.
Browser compatibility chart
Win Mac Linux
iPhone/iPad - Yes -
Internet Explorer 10 Yes - -
Internet Explorer 9 Yes - -
Internet Explorer 8 Yes - -
Internet Explorer 7 Yes - -
Internet Explorer 6 Yes - -
Internet Explorer 5.5 Yes - -
Chrome 25 Yes Yes Yes
Chrome 24 Yes Yes Yes
Chrome 23 Yes Yes Yes
Chrome 22 Yes Yes Yes
Chrome 21 Yes Yes Yes
Chrome 20 Yes Yes Yes
Chrome 19 Yes Yes Yes
Chrome 18 Yes Yes Yes
Chrome 17 Yes Yes Yes
Chrome 16 Yes Yes Yes
Chrome 15 Yes Yes Yes
Chrome 14 Yes Yes Yes
Chrome 13 Yes Yes Yes
Chrome 12 Yes Yes Yes
Chrome 11 Yes Yes Yes
Chrome 10 Yes Yes Yes
Chrome 9 Yes Yes Yes
Chrome 8 Yes Yes Yes
Chrome 7 Yes Yes Yes
Chrome 6 Yes Yes Yes
Chrome 5 Yes Yes Yes
Chrome 4 Yes Yes Yes
Chrome 3 Yes Yes Yes
Firefox 19 Yes Yes Yes
Firefox 18 Yes Yes Yes
Firefox 17 Yes Yes Yes
Firefox 16 Yes Yes Yes
Firefox 15 Yes Yes Yes
Firefox 14 Yes Yes Yes
Firefox 13 Yes Yes Yes
Firefox 12 Yes Yes Yes
Firefox 11 Yes Yes Yes
Firefox 10 Yes Yes Yes
Firefox 9 Yes Yes Yes
Firefox 8 Yes Yes Yes
Firefox 7 Yes Yes Yes
Firefox 6 Yes Yes Yes
Firefox 5 Yes Yes Yes
Firefox 4 Yes Yes Yes
Firefox 3.6 Yes Yes Yes
Firefox 3.5 Yes Yes Yes
Firefox 3 Yes Yes Yes
Firefox 2 Yes Yes Yes
Firefox 1 Yes Yes Yes
Safari 6 - Yes -
Safari 5 Yes Yes -
Safari 4 Yes Yes -
Safari 3 Yes Yes -
Opera 12 Yes Yes Yes
Opera 11 Yes Yes Yes
Opera 10 Yes Yes Yes
Opera 9 Yes Yes Yes
Opera 8 Yes Yes Yes
Konqueror 3.2+ - - Yes

FAQ

Q A Flash object is on top of the zoomed image.

A Set the "wmode" parameter of the Flash object to "transparent" like so:
  1. Add <param name="wmode" value="transparent" /> inside the <object></object>.
  2. If the <embed> tag is present, add this attribute to it: wmode="transparent".
  3. Your code will look something like this:
    <object>
    <param name="wmode" value="transparent" />
    <embed wmode="transparent" />
    </object>

Q Where is the magicthumb-packed.js file?

A The name has been changed to magicthumb.js. Download the new version of Magic Thumb™ with many improvements and new features.

Q Where is magnifying glass cursor?

A When you hover over the image, the + and – cursors should show. If you don't see them, open the magicthumb.css file and edit the locations of the cursors. Change them to an absolute file reference, for example:
.MagicThumb {cursor: url(/images/zoomin.cur)}

Version history

Magic Thumb™ version 2.0
November 30, 2009 – major new release including: four new enlargement effects; automatically fit to screen; multiple images with thumbnails; always visible close button; text positioning to right or left; 6 new button styles and sizes; button position in any corner; two new slideshow effects; link lightbox image to a URL; click to initialize; two new options to position the large image; option to customize each image differently; API options. Phew, that's a whole lot of options.

Magic Thumb™ version 1.2
June 19, 2008 – improvements including: improved background fading effect; fixed overlapping with Flash files; fixed control bar flickering; default image position changed to centre.

Magic Thumb™ version 1.1
June 4, 2008 – new version with the following features: next/previous/close buttons; caption set by the alt or title tag, links within captions; custom position of enlarged image; mouseover enlarging.

Magic Thumb™ version 1.0
May 2, 2008 – Magic Thumb™ enlarges an image from thumbnail to full size like a lightbox using JavaScript and CSS. Cross browser (Firefox, Internet Explorer, Opera, Safari). Lean code. HTML and XHTML compliant. Customisation effects.

Pricing

1 site license £25 Buy now
5 sites license £79 Buy now
10 sites license £149 Buy now
Unlimited license £295 Buy now
Bundled license £799 Buy now
Installation service (optional) £29

Pay by credit card, bank transfer or cheque. Download your product immediately after you pay and start using it!

The £ amount will be automatically converted to your currency.

Payments: Visa, MasterCard, Maestro, Amex, Discover, Paypal, Google Checkout, Avangate
 

Buy Now1 site license £25

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

Download Free trial

30 minutes free technical support.

Download a module:



Magic Toolbox on Facebook Magictoolbox.com on YouTube Magic Toolbox on Twitter Magic Toolbox on GetSatisfaction