Magic Touch

1. Installation

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

If you're not using one of the platforms above, use the instructions below. Just 3 steps to add Magic Touch™ to your website:

1. Sign up to get your unique JS file (free and paid versions available).

2. Copy the code for your unique JS file, for example:

<p><script src="http://www.magictoolbox.com/mt/YOURCODE/magictouch.js" type="text/javascript"></script></p>

3. Insert your two images, for example:

<p><a href="large.jpg" class="MagicTouch"><img src="small.jpg"></a></p>

That's it! No iframes, frames or XML feeds. Just clean HTML as it was meant to be. For help, please contact us.

Installation is also explained in this short video:

2. 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.

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

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

<script>
   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).

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

4. Buttons

Buttons are automatically larger for mobile devices (phones and tablets) to make them easy to click. They are set in these 2 CSS files - one for display on desktop/laptop computer, another for mobile touch screen devices.

The default buttons are:

Standard buttons (for desktops, laptops) https://www.magictoolbox.com/static/magictouch/themes/default/css/desktop.css

Mobile buttons (for phones, tablets, touchscreens) https://www.magictoolbox.com/static/magictouch/themes/default/css/mobile.css

You can create your own custom buttons instead, or you can choose one of the button themes below.

You can also change CSS files entirely by creating your own and saving them on your website, referencing them like so:

MagicTouch.options = {
'stylesheet' : 'http://example.com/dekstop.css',
'stylesheetMobile' : 'http://example.com/mobile.css'
}

5. Custom buttons

To replace the default buttons, design your own and upload them to your website, then specify them in your code. For example:

<script>
   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 download this crossdomain.xml file (right click, Save as...) and upload it to the root of your web server i.e. http://www.example.com/crossdomain.xml. This permits the SWF on the Magic Touch™ servers to reference the buttons on your domain.

6. Themes

Alternatively, choose one of these existing button themes:

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

To change the 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>

Or reference it using the script tag:

<script>
  MagicTouch.options = {
  'theme-url':'http://www.magictoolbox.com/static/magictouch/3dlight.xml'
  }
</script>

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

8. Watermark

You can add branding and a basic level of protection by adding a watermark to your images.

This example shows a watermark on both the standard image and the full screen image (click the icon). By default, it only shows on the fullscreen image.

To add a watermark:

1. Create a PNG image with transparency (example PNG). A minimalist design in grey ususally works well as it is not overly intrusive.
2. Upload your PNG to your website and also upload this crossdomain.xml file (right click, Save as...) to the root of your web server i.e. http://www.example.com/crossdomain.xml.
3. Add the watermark parameter and specify the URL of your PNG image.
4. Add any other optional parameters you wish, such as watermark-alpha (to adjust transparency). See below for all watermark parameters.

Your code might look something like this:

<script>
 MagicTouch.options = {
'watermark' : 'http://www.example.com/watermark.png',
'watermark-alpha' : 10,
'watermark-normal' : 0,
'watermark-fullscreen' : 1
 }
</script>

9. Image protection

Your original large images can be downloaded by users as the image locations are shown in the source code of your page.

To protect your large images, you can use HTTP Basic Authentication to require a password and give Magic Touch™ permission to fetch them like so:

1. Create a .htaccess file, for example:

   AuthType Basic
   AuthName "MagicTouch Protected Area"
   AuthUserFile /path/to/.htpasswd
   Require valid-user
   

2. Create a .htpasswd file with the htpasswd system utility (this comes with Apache), for example:

   # htpasswd -c /path/to/.htpasswd magictouch
   New password: mypassword
   Re-type new password: mypassword
   Adding password for user magictouch
   

3. Enter the username/password in your Magic Touch™ control panel.

Contact us if you would like help with this.

10. JavaScript & Flash versions

Magic Touch™ can work in either JavaScript or Flash mode. By default, it will use Flash when Flash is available and otherwise use JavaScript (for iOS and touchscreen devices).

There are some extra features available in the JavaScript version.

The following features are not available in the JavaScript version:

• Progress bar
• Watermark
• Custom logo
• Styling options from the Flash version (all styling is done via CSS in the JS version)
• Thumbnails in fullscreen mode can only be positioned at the bottom of the screen

11. JavaScript only

You can set Magic Touch™ to always use the JavaScript version (example) like so:

<script>
MagicTouch.options = {
engine: 'JS'
}
</script>

12. 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.

13. Parameters

To apply any of the 70 options below, use one of the two methods described above under Customization.