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

1. Install

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Thumb™ module:

If you're not using one of the platforms above, install Magic Thumb™ like so:

  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 href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="magicthumb/magicthumb.js"></script>
    

    (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)

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

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

A basic HTML page could look like this:

<html>
<head>
<title>Magic Thumb example</title>
<link href="magicthumb.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="magicthumb.js"></script>
</head>
<body>
<a class="MagicThumb" href="big.jpg"><img alt="" src="small.jpg" /></a>
</body>
</html>

Watch this video to see exactly how to install Magic Thumb™!

2. Customize

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

<a href="big.jpg" class="MagicThumb" rel="expand-speed:300; expand-effect:bounce; image-size:original"><img src="small.jpg"/></a>

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

<script type="text/javascript">
MagicThumb.options = {
'expand-speed':'300',
'expand-effect':'bounce',
'image-size':'original'
}
</script>

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

3. 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:

<a href="big.jpg" class="MagicThumb" rel="expand-speed:400; restore-speed: 200"><img src="small.jpg"/></a>

4. 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:

<a href="big.jpg" class="MagicThumb" rel="expand-align:screen; expand-position:top:0,right:0"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="expand-align:image; expand-position:bottom:0,left:200"><img src="small.jpg"/></a>

5. 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:

<a href="big.jpg" class="MagicThumb" rel="image-size:original"><img src="small.jpg"/></a>

6. 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:

<a href="big.jpg" class="MagicThumb" rel="expand-effect:bounce"><img src="small.jpg"/></a>

7. Trigger

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

<a href="big.jpg" class="MagicThumb" rel="expand-trigger:mouseover"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="expand-trigger:mouseover; expand-trigger-delay:300"><img src="small.jpg"/></a>

8. Background

Darken or lighten the background behind the image like so:

<a href="big.jpg" class="MagicThumb" rel="background-opacity:50"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="background-opacity:80; background-color:#00485F; background-speed:500"><img src="small.jpg"/></a>

9. Open from text

You can open images from text like so:

Look at this image!

<a href="big.jpg" class="MagicThumb">Look at this image</a>!

You can also open images via buttons, forms, menus and in other ways. Refer to the API below.

10. Cursor

These two cursors come with Magic Thumb™:

Zoom-in cursor (do not use this file, it is a PNG not the CUR file that you need) Zoom-out cursor (do not use this file, it is a PNG not the CUR file that you need)

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

.MagicThumb-expanded {cursor: url(graphics/zoomout.cur), pointer}
.MagicThumb {cursor: url(graphics/zoomin.cur), pointer; outline: none}

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

You may also choose another cursor e.g. This is a PNG file. Click to view and download the .cur file. This is a PNG file. Click to view and download the .cur file.

11. 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:

.yourname {
border: 4px solid #efefef;
}

You can assign the extra class like so:

<a href="big.jpg" class="MagicThumb" rel="css-class:yourname"><img src="small.jpg"/></a>

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

12. Caption

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

<a href="big.jpg" class="MagicThumb"><img src="small.jpg"/><span>Here is some text</span></a>

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

<a href="big.jpg" class="MagicThumb" rel="caption-source:img:alt"><img src="small.jpg" alt="Here is some text"/></a>

Or via the image title tag:

<a href="big.jpg" class="MagicThumb" rel="caption-source:img:title"><img src="small.jpg" title="Here is some text"/></a>

Or via the link title tag:

<a href="big.jpg" class="MagicThumb" rel="caption-source:a:title" title="Here is some text"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="caption-source:#example"><img src="small.jpg"/></a>
<div id="example">
<h3>This is a heading</h3>
<p>This is more text. Format it however you wish.</p>
</div>

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

<a href="big.jpg" class="MagicThumb"><img src="small.jpg"/><span>Here is some <strong>bold text</strong> and <em>italic text</em> and [a href="example.html"]here is a link[/a]</span>.</a>

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

<a href="big.jpg" class="MagicThumb" rel="caption-speed:0"><img src="small.jpg"/><span>Here is some text</span></a>

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

<a href="big.jpg" class="MagicThumb" rel="caption-position:right"><img src="small.jpg"/><span>Here is some text</span></a>

13. 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:

<a href="big.jpg" class="MagicThumb" rel="buttons:autohide"><img src="small.jpg"/></a>

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:

<a href="big.jpg" class="MagicThumb" rel="buttons-position:top right"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="buttons-display:next,close"><img src="small.jpg"/></a>

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

buttons1.png buttons2.png buttons3.png buttons4.png

buttons5.png buttons6.png buttons7.png

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

.MagicThumb-buttons {
background: transparent url(graphics/buttons-4.png) no-repeat 0 0;
}

Set the width and height of the buttons:

.MagicThumb-buttons {
height: 24px;
}
.MagicThumb-buttons a {
width: 24px;
height: 24px;
}

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.

14. 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:

<a href="big1.jpg" class="MagicThumb" id="hello"><img src="main1.jpg"/></a><br/>
<a href="big1.jpg" rel="thumb-id:hello" rev="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" rel="thumb-id:hello" rev="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" rel="thumb-id:hello" rev="main3.jpg"><img src="tiny3.jpg"/></a>

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

<a href="big1.jpg" class="MagicThumb" id="hello"><img src="main1.jpg"/></a><br/>
<a href="big1.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main3.jpg"><img src="tiny3.jpg"/></a>

15. 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:

<a href="big1.jpg" class="MagicThumb" rel="slideshow-effect:expand"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicThumb" rel="slideshow-effect:expand"><img src="small2.jpg"/></a>
<a href="big3.jpg" class="MagicThumb" rel="slideshow-effect:expand"><img src="small3.jpg"/></a>

All images on your 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:

<a href="big1.jpg" class="MagicThumb" rel="group:fireworks"><img src="small1.jpg"/></a>
<a href="big2.jpg" class="MagicThumb" rel="group:fireworks"><img src="small2.jpg"/></a>
<a href="big3.jpg" class="MagicThumb" rel="group:fireworks"><img src="small3.jpg"/></a>

You can disable the slideshow by specifying a unique group name to each Magic Thumb™ instance.

To disable the slideshow effect on every Magic Thumb™ image, set slideshow-speed to 0 like so:

<script type="text/javascript">
MagicThumb.options = { 'slideshow-speed' : 0 }
</script>

16. Link to URL

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

<a href="big1.jpg" class="MagicThumb" rel="link:http://www.example.com"><img src="small1.jpg"/></a>

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

<a href="big1.jpg" class="MagicThumb" rel="link:http://www.example.com; link-target:_blank"><img src="small1.jpg"/></a>

17. API

Make JavaScript 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:

<script type="text/javascript">
MagicThumb.expand('id-of-your-choice');
</script>
<a href="big.jpg" class="MagicThumb" id="id-of-your-choice"><img src="small.jpg"/></a>

Or:

<script type="text/javascript">
MagicThumb.expand(document.getElementById('id-of-your-choice'));
</script>
<a href="big.jpg" class="MagicThumb" id="id-of-your-choice"><img src="small.jpg"/></a>

18. Show thumbnail

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

<a href="big.jpg" class="MagicThumb" rel="keep-thumbnail:true"><img src="small.jpg"/></a>

19. 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:

<a href="big.jpg" class="MagicThumb" rel="keyboard:false"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicThumb" rel="keyboard-ctrl:true"><img src="small.jpg"/></a>

20. Parameters

Entire list of 39 parameters available to you:

Parameters for Magic Thumb™
Parameter Default Options Description
Effects
expand-speed 500 0-10000 Expand duration (ms)
restore-speed 0-10000 Restore duration (ms), optional
expand-effect linear linear / cubic / back / elastic / bounce Effect for expanding image
restore-effect auto linear / cubic / back / elastic / bounce Effect for restoring image
keep-thumbnail false true / false Show/hide thumbnail when image enlarged
expand-trigger click click / mouseover Trigger for the enlarge effect
expand-trigger-delay 500 0-1000 Delay before mouseover enlargement (ms)
restore-trigger auto auto / click / mouseout Trigger for the shrink effect
Positioning
image-size fit-screen fit-screen / original Size of the enlarged image
expand-align screen screen / image Align image relative to screen or small image
expand-position center center / coordinates
examples: top:0, right:25 or bottom:100, left:100
Precise position of the enlarged image (px)
Multiple images
swap-image click click / mouseover Method to switch between multiple images
swap-image-delay 100 0-1000 Delay before switching images (ms)
slideshow-effect dissolve dissolve / fade / expand Slideshow effect from one image to next
slideshow-speed 500 0-10000 Speed of slideshow effect (ms)
slideshow-loop true true / false Restart slideshow after last image
thumb-id   id of main image Choose multiple images to be swapped
Background
background-color #000000 Background color behind large image
background-opacity 0 0-100 Opacity of the background, 0 = disabled
background-speed 200 0-10000 Duration of background fade (ms)
Caption
caption-source span span / img:alt / img:title / a:title / #id Source of caption text
caption-speed 250 0-10000 Speed of caption slide effect (ms)
caption-position bottom bottom / right / left Where to position the caption
caption-height 300   Max height of bottom caption (px)
caption-width 300   Max width of left/right caption (px)
Buttons
buttons show show / hide / autohide Whether or not to show buttons
buttons-position auto auto / top left / top right / bottom left / bottom right Corner position of buttons
buttons-display previous, next, close previous / next / close Show all three buttons or just one or two
Initialization
click-to-initialize false true / false Click to fetch large image
show-loading true true / false Show or not loading box
loading-msg Loading Text of the loading message
loading-opacity 75 0-100 Opacity of the loading box
Miscellaneous
group   any name Group images together into a set
link   http://www.example.com Link the enlarged image to a URL
link-target _self _blank / _self / _parent / _top Open link in browser window/frame
keyboard true true / false Ability to use keyboard shortcuts
keyboard-ctrl false true / false Require the Ctrl key to permit shortcuts
css-class   any name Apply different styles to different images
z-index 10001 The z-index for the enlarged image