Magic Touch™ integration
Just 3 steps to add Magic Touch™ to your website:
1. Sign up (free) to get your unique JS file.
2. Copy the code for your unique JS file, for example:
<script src="http://www.magictoolbox.com/mt/123456/magictouch.js" type="text/javascript"></script>
3. Insert your two images, for example:
<a href="large.jpg" class="MagicTouch"><img src="small.jpg"/></a>
That's it! No iframes, frames or XML feeds. Just clean HTML as it was meant to be. For help, please contact us.
Customization
Make it look perfect on your site, with more than 50 customisation parameters.
Either apply your options in a rel tag, like so:
<a href="large.jpg" class="MagicTouch" rel="levels:3; print:part; smoothing:12"><img src="small.jpg"/></a>
<script type="text/javascript">
MagicTouchOptions = {
'levels' : '3',
'print' : 'part',
'smoothing' : '12'
}
</script>
There should be no comma after the last parameter, otherwise Internet Explorer will throw a JavaScript error (a well documented bug in IE).
| Parameter | Default | Description |
|---|---|---|
| levels | 4 | Quantity of zoom levels (2-9) |
| border-width | 0 | Border width in pixels (0=none) |
| border-color | '#006b66' | Border color |
| progress-height | 10 | Progress bar height in pixels (0=off) |
| progress-color | '#00501f' | Progress bar color |
| save | false | Right click option to "Save image" (true / false) |
| fullscreen | true | Full-screen feature (true / false) |
| fullscreen-btn-scale | 30 | Size of buttons on full-screen (0-100) |
| button-position-y | 'top' | Position of the +/- buttons (top or bottom) |
| button-position-x | 'left' | Position of the +/- buttons (left or right) |
| button-margin | 10 | Distance of buttons from edges, in pixels |
| button-alpha | 70 | Button transparency (0-100) |
| button-alpha-hover | 100 | Button transparency on mouseover (0-100) |
| button-orientation | 'vertical' | Buttons in a row (vertical or horizontal) |
| button-padding | 2 | Distance between + and - buttons, in pixels |
| nav-show | 1 | Show/hide navigation buttons (0=no 1=yes) |
| nav-alpha | 30 | Nav button transparency (0-100) |
| preview-size | 25 | Size of the preview area (0-100) |
| preview-alpha | 50 | Transparency of preview area (0-100) |
| preview-position-y | 'bottom' | Vertical position of preview (top or bottom) |
| preview-position-x | 'left' | Horizontal position of preview (left or right) |
| preview-selection-alpha | 75 | Opacity of rectangle within preview |
| arrow-show | true | Show arrows or not (true / false) |
| arrow-move | 40 | Amount of movement on arrow click, in pixels |
| arrow-position-y | 'bottom' | Vertical position of arrows (top/bottom) |
| arrow-position-x | 'right' | Horizontal position of arrows (left/right) |
| Shows a button to print the image (entire/part) | ||
| smoothing | 8 | Smooth the movement when dragging image |
| background-color | '#fff' | Background colour for full-screen mode |
| theme-url | Choose a different theme for buttons (8 themes below) | |
| btn-fullscreen |  |
Choose your own image e.g. http://www.example.com/fullscreen.png |
| btn-close |  |
Choose your own image e.g. http://www.example.com/close.png |
| btn-close-big |  |
Choose your own image e.g. http://www.example.com/close-big.png |
| btn-print |  |
Choose your own image e.g. http://www.example.com/print.png |
| arrow-top |  |
Choose your own top arrow e.g. http://www.example.com/top.png |
| arrow-right |  |
Choose your own right arrow e.g. http://www.example.com/right.png |
| arrow-bottom |  |
Choose your own bottom arrow e.g. http://www.example.com/bottom.png |
| arrow-left |  |
Choose your own left arrow e.g. http://www.example.com/left.png |
| arrow-reset |  |
Choose your own reset image e.g. http://www.example.com/reset.png |
| plus-url |  |
Choose your own + image e.g. http://www.example.com/plus.png |
| minus-url |  |
Choose your own - image e.g. http://www.example.com/minus.png |
| nav-url |  |
Choose your own Ο image e.g. http://www.example.com/nav.png |
| loader |  |
Choose your own loading image e.g. http://www.example.com/loader.png Turn off the loading image with: "loader" : "" |
| thumbnails-position | bottom | Position of thumbnails in full-screen view |
| thumbnails-alpha | 70 | Opacity of thumbnails in full-screen view |
| thumbnails-alpha-hover | 100 | Hover-opacity of thumbnails |
| thumbnails-padding | 10 | Padding of thumbnails |
| thumbnails-border-color | #c2c2c2 | Thumbnail border color |
| thumbnails-border-width | 1 | Thumbnail border width |
| thumbnails-max-height | 0 | Max height of thumbnails in full-screen view 0 = none |
| thumbnails-max-width | 0 | Max width of thumbnails in full-screen view 0 = none |
| arrow-alpha | Transparency of arrows | |
| arrow-alpha-hover | Transparency of arrows on hover | |
| arrow-background | Choose your own arrow background e.g. http://www.example.com/background.png | |
| arrow-background-alpha | Transparency of arrow background | |
| arrow-background-offset-x | Move the background image of the arrow | |
| arrow-background-offset-y | Move the background image of the arrow | |
| watermark | Add a watermark PNG (paid users only) watermark example e.g. http://www.example.com/watermark.png |
|
| watermark-alpha | 10 | Transparency of the watermark 0-100 |
| watermark-normal | false | Show watermark in normal view (true / false) |
| watermark-fullscreen | true | Show watermark in full-screen (true / false) |
| fullscreen-only | false | Click anywhere on image to activate fullscreen |
| fullscreen-only-image | Choose your own button for fullscreen-only | |
| custom-logo | Choose your own logo (paid users only) e.g. http://www.example.com/logo.png | |
| custom-logo-position-x | 'right' | Your logo position (left or right) |
| custom-logo-position-y | 'top' | Your logo position (top or bottom) |
Multiple images
Swap the main image with as many other images as you like: perfect when you have multiple product photos. You just need to use rel and rev tags in the href. Example:
<p><a href="image1-huge.jpg" id="monkey" class="MagicTouch"><img src="image1-main.jpg"/></a></p>
<p><a href="image1-huge.jpg" rel="monkey" rev="image1-main.jpg"><img src="image1-small.jpg"/></a> <a href="image2-huge.jpg" rel="monkey" rev="image2-main.jpg"><img src="image2-small.jpg"/></a> <a href="image3-huge.jpg" rel="monkey" rev="image3-main.jpg"><img src="image3-small.jpg"/></a></p>
Custom buttons
You can replace the default buttons by uploading your own images to your website. For example:
<script type="text/javascript">
MagicTouchOptions = {
'watermark' : 'http://www.example.com/watermark.png',
'btn-fullscreen' : 'http://www.example.com/fullscreen.png',
'btn-close' : 'http://www.example.com/close.png'
}
</script>
You should also place a crossdomain.xml file in the root of your web server.
Button themes
You can choose from 8 different button themes:
- http://www.magictoolbox.com/static/3dlight.xml
- http://www.magictoolbox.com/static/3dlight-blue.xml
- http://www.magictoolbox.com/static/3dlight-green.xml
- http://www.magictoolbox.com/static/3dlight-red.xml
- http://www.magictoolbox.com/static/magic-gray.xml
- http://www.magictoolbox.com/static/magic-red.xml
- http://www.magictoolbox.com/static/magic-blue.xml
- http://www.magictoolbox.com/static/magic-green.xml
Or, to create your own theme, open an XML file above and see how to reference your buttons.
To choose your theme, use the theme-url parameter, for example:
<a href="large.jpg" class="MagicTouch" rel="theme-url:http://www.magictoolbox.com/static/3dlight.xml"><img src="small.jpg"/></a>
Save image
You can give users to save the image on right click like so:
<a href="large.jpg" class="MagicTouch" rel="save: true"><img src="small.jpg"/></a>
Swap images with JavaScript
You can change the image using a dropdown list, or radio buttons or in other ways using JavaScript. For example:
var movie = MagicTouch_getFlashMovieObject('mtObj0');
if (movie.changeImage) {
movie.changeImage(smallImageUrl,bigImageUrl);
}
0 is the first Magic Touch™ object on the page, 1 is the second, 2 is the third etc.
The images should be initialized before you call changeImage. To initialize them, place all the images on the page, for example:
<a rel="{touchID}" rev="small2.jpg" href="big2.jpg">......</a>
<a rel="{touchID}" rev="small3.jpg" href="big3.jpg">......</a>
You can hide them by using display:none in the CSS.
You can also initialize additional images via this JavaScript:
var movie = MagicTouch_getFlashMovieObject('mtObj0');
if (movie.initThumbnails) {
var image = {
'sm_img':'small.jpg',
'bg_img':'big.jpg'
};
movie.initThumbnails(image);
}
Installation guides
Magic Touch™ can be installed on any website. It's even easier to install if your site uses one of these platforms:
©2010 Magic Toolbox About | Contact | Support | Affiliates | Newsletter | Testimonials | License Agreement | Terms | Privacy