Magic Thumb™ integration

Install this popular effect on your website with just 3 lines of code. Then customise it.

Install

To install on a shopping cart, download a module.

To install manually:

1. Download the Magic Thumb™ demo.
2. Upload the magicthumb folder to your site.
3. Reference the JavaScript and CSS files before the </head> in your page. Example:

   <link type="text/css" rel="stylesheet" href="magicthumb/magicthumb.css"/>

   <script type="text/javascript" src="magicthumb/magicthumb.js"></script>

4. Link your small image to your large image with a class of MagicThumb. Example:

   <a href="big.jpg" class="MagicThumb"><img src="small.jpg"/></a>

A basic HTML page could look like this:

Customize

Customize your Magic Thumb™ just how you want it. There are 39 parameters available. Apply your settings with the rel attribute. Example:

Alternatively, set your customizations with a <script> tag to apply the same settings to every Magic Thumb™. Example:

Do not put a comma after the last tag or Internet Explorer will throw a JavaScript error (a well documented IE bug).

Speed

Define how long the enlarge and restore effects take (in milliseconds). The default is 500ms and the restore effect is the same unless you define it separately. Example:

Position

The image will enlarge into the center of the screen by default. You can change it to enlarge to a fixed position. In this example, it will enlarge to the top right of the screen:

In the following example, the large image will enlarge 200px to the right of the small image:

Size

If the large image is taller or wider than the users screen, it will automatically scale down to fit the screen. This lets the user see the entire image without scrolling. Instead, you can show the image at its original size like so:

Effect

Five effects can be used to enlarge the image:

• Linear - expands at steady rate.
• Cubic - starts fast, then slows down.
• Back - shrinks, then enlarges too much, then shrinks to correct size.
• Elastic - enlarges too much, then shrinks to correct size.
• Bounce - enlarges then contacts, twice.

You can choose an effect like so:

Trigger

You can trigger Magic Thumb™ by click or mouseover. Example:

The mouseover trigger has a 500 millisecond delay to prevent it activating by mistake. You can increase/decrease the delay like so:

Background

Darken or lighten the background behind the image like so:

The default backgound color is black and fades in 0.2 seconds. You can choose your own settings, for example:

Cursor

These two cursors come with Magic Thumb™:

Upload the cursors to your site and reference them in magicthumb.css. Example:

If the cursor url in your CSS is incorrect, the default browser cursor will be used.

CSS

Edit the magicthumb.css file to change the caption font, colors, background and padding and borders.

This spinning icon will show if the large image is not yet ready to be viewed. The location of the icon can be changed in the CSS, or change the icon itself to one of your own.

In the rare case that you want different styles on different images, you can create a new class. For example:

You can assign the extra class like so:

If you get stuck with CSS formatting, please contact us.

Caption

There are 5 ways to add text to the enlarged image. The default is <span>. For example:

You can also show a caption via the image alt tag:

Or via the image title tag:

Or via the link title tag:

Or by using a <div>, which can include any HTML tags that you wish:

You can add links, bold or italics with a <div>, or you could use a <span> like so:

The caption slides out from under the image. You can adjust the speed (normally 250 milliseconds) or you can turn it off like so:

You can place the caption to the bottom, left or right of the image. Example:

Buttons

Forward, back and close buttons are shown in the corner of the enlarged image. You can set them to hide or autohide (shows only while mouse is over image). Example:

The buttons are automatically positioned to the top right on Windows and Linux and the top left on Mac OS. You can override this by fixing them to the top left, top right, bottom left or bottom right. Example:

All three buttons will show (next, previous, close). Alternatively, you can choose which buttons to show. Example:

Magic Thumb™ comes with 7 sets of buttons, each with 3 sizes (18px, 24px, 32px). These are the 24px buttons:

        
     

The first set of buttons is the default. To use a different set, edit the CSS, for example:

Set the width and height of the buttons:

If you are feeling creative, design your own buttons! Place all 6 buttons on one image. The top three are the default state and the bottom three are the mouseover state.

Multiple images

Switch between different images of the same product by using 3 sizes of images (called tiny, main, big in the example below). Give the main image an id, then use the thumb-id parameter to associate your images. Example:

You can swap the main image on mouseover instead of on click. Example:

Slideshow

Users can click from one image to the next in a slideshow style. Three effects are available: dissolve one image into the next; fade images towards white; expand and contract each image from a thumbnail. Choose your effect like so:

All images on yout page with Magic Thumb™ will be in your slideshow. If you only want a few images in the slideshow, you can group them like so:

Link to URL

Clicking the enlarged image will close it. Instead, you can make the enlarged image a link to another page. Example:

The link can open in the current window, a new window or a frame. Example:

API

Make AJAX calls to control Magic Thumb™. Eight options are available:

• MagicThumb.start(); - enable all Magic Thumb™ images on the page
• MagicThumb.start('id'); - enable a particular image by id of <a>
• MagicThumb.stop(); - stop all images on the page
• MagicThumb.stop('id'); - stop a particular image by id of <a>
• MagicThumb.refresh(); - reload all Magic Thumb™ images on the page
• MagicThumb.refresh('id'); - reload a particular image by id of <a>
• MagicThumb.expand('id'); - expand a particular image by id of <a>
• MagicThumb.restore('id'); - restore a particular image by id of <a>

Example:

Or:

Show thumbnail

The thumbnail hides when it is clicked. You can keep it visible like so:

Keyboard navigation

Magic Thumb™ can be controlled with key strokes like so:

• Left arrow or Up arrow or Page up - previous image
• Right arrow or Down arrow or Page down - next image
• Space bar - next image
• Escape - close

You can disable keyboard shortcuts like so:

Or you can require the user to also press the Ctrl key (e.g. Ctrl + Left arrow) like so: