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.
  •  iOS
  •  Android
  •  Chrome
  •  Internet Explorer 6+
  •  Firefox
  •  Safari
  •  Opera

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.65
April 3, 2014

Resolves conflicts with jQTouch CSS.

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) $49

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