Magic Thumb™ integration
Add Magic Thumb™ to your website with just 3 lines of code, then customise it...
In the <head>:
<link rel="stylesheet" href="magicthumb.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="magicthumb-packed.js"></script>
In the <body>:
<a href="example_big.jpg" class="MagicThumb"><img src="example_small.jpg"/></a>
Demos
Now you can customise Magic Thumb™. Here are some examples:
- Basic example
- Dark background example
- Visible thumbnail example
- Custom speed example
- Slideshow example
Customization
You can tweak Magic Thumb™ to your liking to suit your website.
Speed
Define how long the zoom effect takes (in seconds). The default values are 0.5 seconds for enlarge (zoomDuration) and 0.3 seconds for collapse (restoreDuration).
How to set one value for enlarge and collapse effects:
<script type="text/javascript"> MagicThumb.options = { duration: 0.5 } </script>
How to set different values for both effects:
<script type="text/javascript"> MagicThumb.options = { zoomDuration: 0.4, restoreDuration: 0.1 } </script>
Image position
By default, the image will expand to the centre of the screen. If required, it will move or contract to fit the users browser.
You can change the position of the enlarged image by setting zoomPosition to auto. The auto setting will expand the large image on top of the small image instead of the center position.
<script type="text/javascript">MagicThumb.options = {zoomPosition: 'auto'} </script>
Trigger
The enlarge effect can be triggered by clicking the image (the default setting) or on hover. To change it, set zoomTrigger to mouseover (default value is click):
<script type="text/javascript">MagicThumb.options = {zoomTrigger : 'mouseover'} </script>
You can specify a delay before the mouseover trigger by changing zoomTriggerDelay option (default value 0.5 seconds):
<script type="text/javascript"> MagicThumb.options = {zoomTrigger : 'mouseover',zoomTriggerDelay : 0.3} </script>
Thumbnail visibility
The thumbnail is hidden by default after it is clicked. You can keep the thumbnail visible by setting keepThumbnail option to true:
<script type="text/javascript"> MagicThumb.options = { keepThumbnail: true } </script>
Caption
You can add text underneath the enlarged image using span, alt or title.
Add a caption using span:
<a href="example_big.jpg" class="MagicThumb"><img src="example_small.jpg"/><span>Here is some text</span></a>
Add a caption using alt:
<html>
<head>
<script type="text/javascript">
MagicThumb.options = {
captionSrc: 'img:alt'
}</script>
</head>
<body>
<a href="example_big.jpg" class="MagicThumb"><img src="example_small.jpg" alt="This is a caption text from image ALT attribute"/></a>
</body>
</html>
Add a caption using title:
<html>
<head>
<script type="text/javascript">
MagicThumb.options = {
captionSrc: 'img:title'
}</script>
</head>
<body>
<a href="example_big.jpg" class="MagicThumb"><img src="example_small.jpg" title="This is a caption text from image TITLE attribute"/></a>
</body>
</html>
Add a link in the caption
You can add a link to the caption by changing the <a> to [a]. Example:
<a href="example_big.jpg" class="MagicThumb"><img src="example_small.jpg"/><span>This is the caption text. And [a href="http://www.example.com/example.html"]this is a link[/a]</span></a>
Caption animation
You can adjust the duration of the caption’s slide effect by changing captionSlideDuration. The default value is 0.250 seconds. To disable sliding, set it to 0.
<script type="text/javascript"> MagicThumb.options = { captionSlideDuration: 0.5 } </script>
Multiple images
You can enlarge multiple images at the same time (by default, one will close as the next opens). To allow multiple images, set the allowMultipleImages option to true (the default value is false).
<script type="text/javascript"> MagicThumb.options = { allowMultipleImages: true } </script>
Keyboard navigation
The user can activate Magic Thumb™ with key strokes, to navigate between images.
- Escape - closes the current zoomed image.
- Space bar - closes the current large image and expands the next one.
- Page Up or Arrow Up or Arrow Left - closes the current large image and expands the previous one.
- Page Down or Arrow Down or Arrow Right - closes the current large image and expands the next one.
You can disable keyboard shortcuts by setting allowKeyboard to false:
<script type="text/javascript"> MagicThumb.options = { allowKeyboard: false } </script>
You can require the user to use the Ctrl key if you wish so that a combination of Ctrl + Arrow Up instead of Arrow Up:
<script type="text/javascript">MagicThumb.options = {useCtrlKey : true}</script>
Fading background
You can add the popular darken/lighten background effect by setting backgroundFadingOpacity between 0 and 1 (0 disables the effect):
<script type="text/javascript">MagicThumb.options = {backgroundFadingOpacity : 0.8}</script>
You can also change the background color and the speed of the fade:
<script type="text/javascript">MagicThumb.options = {backgroundFadingColor: '#cccccc', backgroundFadingDuration: 0.4}</script>
The default values are backgroundFadingColor '#000000' and backgroundFadingDuration '0.2' seconds.
Control bar
By default Magic Thumb™ adds a control bar to the large image with forward, back and close buttons.
You can disable a control bar by setting controlbarEnable to false:
<script type="text/javascript">MagicThumb.options = {controlbarEnable: false}</script>
You can change its position by modifying controlbarPosition (the default is top right).
Possible values:
- 'top right'
- 'top left'
- 'bottom right'
- 'bottom left'
Example:
<script type="text/javascript">MagicThumb.options = {controlbarPosition: 'top left'}</script>
Customizing CSS
You can customize colors, borders and font styles by editing magicthumb.css. These are the default styles:
/* Thumbnail image */
.MagicThumb img {border: 1px solid #F0F0F0; outline: none}
/* Big image while zooming */
.MagicThumb-image {border: 1px solid #F0F0F0; outline: none}
/* Big image when zoomed */
.MagicThumb-image-zoomed {cursor: url(cursor/zoomout.cur), pointer}
/* Caption under the big zoomed image */
.MagicThumb-caption {color: #333333; background-color: #CCCCCC; border: 1px solid #F0F0F0; border-top: none; padding: 8px 16px}
/* Thumbnail link <a> */
.MagicThumb {cursor: url(cursor/zoomin.cur), pointer; outline: none}
/* Thumbnail link <a> when big image zoomed */
.MagicThumb-zoomed {cursor: default}
/* Hiding the text inside the <span> */
.MagicThumb span {display: none}
/* Styling the control bar */
.MagicThumb-controlbar {display: block; height: 18px}
.MagicThumb-controlbar a {display: block; width: 18px; height: 18px; margin: 0px 1px; outline: none; float: left; overflow: hidden}
.MagicThumb-controlbar a span {display: block; width: 1000px; height: 1000px; background: transparent url(graphics/controlbar.png) no-repeat 0 0;outline: none; position: absolute;left: 0px; top: 0px}
Cursor
You can change the mouse cursor by editing the CSS. Two alternative cursor images are packaged with Magic Thumb™, zoomin.cur and zoomout.cur. Turn these on by uploading the cursor images to your server and referencing them in the CSS like so:
/* Big image when zoomed */
.MagicThumb-image-zoomed {cursor: url(images/zoomout.cur), pointer}
/* Thumbnail link <a> */
.MagicThumb {cursor: url(images/zoomin.cur), pointer; outline: none}
/* Thumbnail link <a> when big image zoomed */
.MagicThumb-zoomed {cursor: default}
To use the default cursor, remove the cursor URL information like so:
/* Big image when zoomed */
.MagicThumb-image-zoomed {}
/* Thumbnail link <a> */
.MagicThumb {outline: none}
/* Thumbnail link <a> when big image zoomed */
.MagicThumb-zoomed {cursor: default}
Controlbar
You can change the control bar buttons by creating your own PNG image. This is the default image (54px by 36px):
All 6 buttons should be on the same image and should be in the same order as above (left, right, close). The top set of buttons is the default state and the bottom set is the mouse over state.
Update the CSS with the location of your new PNG image:
.MagicThumb-controlbar a span {background: transparent url(images/your-new-image.png) no-repeat 0 0;}
Set the new width and height of each button:
.MagicThumb-controlbar a {width: XXpx; height: XXpx;}
Set the new height of the control bar container:
.MagicThumb-controlbar {height: XXpx;}
Other installation guides
There are dedicated modules and plugins to add this JavaScript image expander to many ecommerce stores:
Buy Magic Thumb™
Free trial
Free license
For non-commercial sites:
©2008 Magic Toolbox About | Contact | Support | Newsletter | Testimonials | License Agreement | Terms | Privacy