MagicToolbox.comImage tools for your website Contact Us

Magic Touch™ integration

  1. Install
  2. Customize
  3. Parameters
  4. Multiple images
  5. Custom buttons
  1. Button themes
  2. Save images
  3. Swap images
  4. API
  5. Debug

Install

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/YOURCODE/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 70 customisation parameters below.

Either apply your parameters in a rel tag inside the <a>, e.g.

<a href="large.jpg" class="MagicTouch" rel="levels:3; print:part; smoothing:12"><img src="small.jpg"/></a>

Or apply your options in a <script> tag before the </head>, like so:

<script type="text/javascript">
  MagicTouch.options = {
  '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).

Parameters

List of parameters
Parameter Default Description
Zoom
levels   Quantity of zoom levels (2-9), calculated automatically.
smoothing 8 Smooth the movement when dragging image
Background, borders and progress bar
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
background-color '#fff' Background colour for full-screen mode
Buttons
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
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-show 1 Show/hide navigation buttons (0=no 1=yes)
nav-alpha 30 Nav button transparency (0-100)
nav-url Choose your own Ο image e.g. http://www.example.com/nav.png
Arrows
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)
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
arrow-alpha 70 Transparency of arrows (0-100)
arrow-alpha-hover 100 Transparency of arrows on hover (0-100)
arrow-background Choose your own arrow background e.g. http://www.example.com/background.png
arrow-background-alpha 100 Transparency of arrow background
arrow-background-offset-x 0 Move the background image of the arrow
arrow-background-offset-y 0 Move the background image of the arrow
Full-screen
fullscreen true Full-screen feature (true / false)
fullscreen-btn-scale 30 Size of buttons on full-screen (0-100)
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
Preview Area
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
Selector thumbnails
selectors-class   Apply a CSS class to style the active selector
selectors-opacity   Change the opacity of the non-selected thumbnails
Full-screen thumbnails
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
Watermark
watermark Add a watermark PNG (paid users only)
e.g. http://www.example.com/watermark.png. More details
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. More details
fullscreen-only-image Choose your own button for fullscreen-only
Custom logo
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)
Other features
theme-url Choose a different theme for buttons (8 themes below)
loader Choose your own loading image e.g. http://www.example.com/loader.png
Turn off the loading image with: "loader" : ""
save false Right click option to "Save image" (true / false)
print false Shows a button to print the image (entire/part/false)
btn-print Choose your own image e.g. http://www.example.com/print.png

Multiple images

Use thumbnail images to swap the main image (example). It's perfect if you have more than one product photo. You just need to place 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">
  MagicTouch.options = {
  '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 must also upload this crossdomain.xml file in the root of your web server i.e. http://www.example.com/crossdomain.xml.

Button themes

You can choose from 8 different button themes:

  • http://www.magictoolbox.com/static/magictouch/3dlight.xml
  • http://www.magictoolbox.com/static/magictouch/3dlight-blue.xml
  • http://www.magictoolbox.com/static/magictouch/3dlight-green.xml
  • http://www.magictoolbox.com/static/magictouch/3dlight-red.xml
  • http://www.magictoolbox.com/static/magictouch/magic-gray.xml
  • http://www.magictoolbox.com/static/magictouch/magic-red.xml
  • http://www.magictoolbox.com/static/magictouch/magic-blue.xml
  • http://www.magictoolbox.com/static/magictouch/magic-green.xml

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/magictouch/3dlight.xml"><img src="small.jpg"/></a>

You could also design your own theme! Copy an XML file above and edit it to use URLs of the buttons you have designed.

Save image

You can permit 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

Images will swap when you click on an alternative image - see "multiple images" above. You can also swap an image via a dropdown list, or radio buttons or in many 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="small1.jpg" href="big1.jpg">......</a>
<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 images = new Array();

images[0] = {

'sm_img':'small.jpg',

'bg_img':'big.jpg'

};

movie.initThumbnails(images);

}

API

You can make AJAX calls to control Magic Touch™.

Reload all Magic Touch™ images by using MagicTouch.refresh();. For example, here is a button that will reload all the zooms on the page:

<input type="button" onclick="MagicTouch.refresh()" value="Refresh"/>

Swap the image in the zoom by using MagicTouch.update();. You should specify the id of the image you want to swap and the location of the large and small images to be shown, using this format: MagicTouch.update(id, largeImage, smallImage);. You can obtain the the id of the image with: document.getElementByid('id_of_a_tag');.

For example, this code below uses a <select> menu to swap the image with id="canon".

<script type="text/javascript">
images = [
['image1b.jpg', 'image1a.jpg'],
['image2b.jpg', 'image2a.jpg'],
['image3b.jpg', 'image3a.jpg'],
['image4b.jpg', 'image4a.jpg']
];

function changeImage(el){
var canon = document.getElementById('canon');
var i = el.selectedIndex;
MagicTouch.update(canon, images[i][0], images[i][1]);
}

</script>

<a href="image1b.jpg" id="canon" class="MagicTouch"><img src="image1a.jpg"/></a>

<select onchange="changeImage(this)">
<option value="1">Description 1</option>
<option value="2">Description 2</option>
<option value="3">Description 3</option>
<option value="4">Description 4</option>
</select>

This is a working example:

Debug

You can use debug mode to identify any problems such as missing images. Simply add #mtdebugmode to the end of the URL you are testing, for example:

http://www.example.com/gucci-bag-4/#mtdebugmode

Enable Firebug and look at the console to see any error messages. Screenshot.

If you don't use Firebug or an equivalent console, any error messages will show as an alert() in your browser instead.

Sign up now Try it on your site

Log in

Best user interface
Magic 360 Plus has the best user interface for a 360 photo tool.

Nikolay Andreyev, Nov 10, 2011

More customer reviews

Download the module for: