1-718-887-7598 
0141 416 3414
Ecommerce Templates > General Help > Magic Toolbox
Magic Toolbox Integration
We have teamed up with industry leaders, Magic Toolbox, to provide a range of product image tools that are guaranteed to wow your customers, inspire them to purchase with the detail available and allow you to employ cutting edge technology on your store with the minimum of effort. Although these are paid plug-ins, they won't be overwritten by updaters as we have carried out the integration for you.
Please note these do require a minimum version of Ecommerce Plus 6.1
- Magic Zoom Plus ™
- Magic Zoom ™
- Magic Thumb ™
- Magic Magnify Plus ™
- Magic Magnify ™
- Magic Touch ™
- Magic Slideshow ™
- Magic Scroll ™
- Magic 360 Plus ™
- Magic 360 ™
- Combine Magic Scroll with other tools
- CSS tweaks
- Troubleshooting
Magic Zoom Plus ™
Magic Zoom Plus allows your customers to view magnified product images, choosing between the thumbnails you define in your store control panel and viewing them at full size if they wish.
Integration instructions
- Download the Magic Zoom Plus zip file from the Magic Toolbox site.
- Upload the /magiczoomplus/ folder to your store root, this is the folder that contains the files magiczoomplus.js, magiczoomplus.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicZoomPlus"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicZoomPlus"; - Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Zoom Plus comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""disable-zoom:true; opacity:65; expand-effect:bounce"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="disable-zoom:true; opacity:65; expand-effect:bounce"';
Magic Zoom ™
Magic Zoom allows your customers to view magnified product images and choosing between the thumbnails you define in your store control panel.
Integration instructions
- Download the Magic Zoom zip file from the Magic Toolbox site.
- Upload the /magiczoom/ folder to your store root, this is the folder that contains the files magiczoom.js, magiczoom.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magiczoom/magiczoom.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicZoom"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicZoom";
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Zoom comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""opacity:65; zoom-fade:false"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="opacity:65; zoom-fade:false"';
Magic Thumb ™
Magic Thumb allows your customers to switch between your thumbnail product pictures, enlarge them and then run them like a slideshow.
Integration instructions
- Download the Magic Thumb zip file from the Magic Toolbox site.
- Upload the /magicthumb/ folder to your store root, this is the folder that contains the files magicthumb.js, magicthumb.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicthumb/magicthumb.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicThumb"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicThumb";
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Thumb comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""expand-speed:5000; swap-image:mouseover"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="expand-speed:5000; swap-image:mouseover"';
Magic Magnify Plus ™
Magic Magnify Plus shows your product pictures with a magnifying glass effect to zoom in on detail and then enlarge on click.
Integration instructions
- Download the Magic Magnify Plus zip file from the Magic Toolbox site.
- Upload the /magicmagnifyplus/ folder to your store root, this is the folder that contains the files magicmagnifyplus.js, magicmagnifyplus.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicMagnifyPlus"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicMagnifyPlus";
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Magnify Plus comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""magnifier:square; thumb-change:mouseover"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="magnifier:square; thumb-change:mouseover"';
Magic Magnify ™
Magic Magnify shows your product pictures with a magnifying glass effect to zoom in on detail.
Integration instructions
- Download the Magic Magnify zip file from the Magic Toolbox site.
- Upload the /magicmagnify/ folder to your store root, this is the folder that contains the files magicmagnify.js, magicmagnify.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicmagnify/magicmagnify.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicMagnify"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicMagnify";
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Magnify comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""magnifier:square; thumb-change:mouseover"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="magnifier:square; thumb-change:mouseover"';
Magic Touch ™
Magic Touch is the most complete tool available showing your product in incredible detail with maximum flexibility.
Integration instructions
- Go to the Magic Touch page and click on the sign up button.
- Enter the domain you will be using Magic Touch tool on and make a note of the Magic Touch key.
- For the ASP version, open vsadmin/includes.asp and add the lines
magictoolbox="MagicTouch"
magictouchid="ACCOUNTID"
... where ACCOUNTID is the Magic Touch key you copied from the Magic Toolbox site
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicTouch";
$magictouchid="ACCOUNTID";
... where ACCOUNTID is the Magic Touch key you copied from the Magic Toolbox site
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Touch comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""levels:4; border-width:1"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="levels:4; border-width:"';
Magic Slideshow ™
Magic Slideshow allows you to show smooth scrolling images of your products pictures.
Integration instructions
- Download the Magic Slideshow zip file from the Magic Toolbox site.
- Upload the /magicslideshow/ folder to your store root, this is the folder that contains the files magicslideshow.js, magicslideshow.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicslideshow/magicslideshow.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magictoolbox="MagicSlideshow"
- For the PHP version, open vsadmin/includes.php and add the line
$magictoolbox="MagicSlideshow";
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Slideshow comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptionsjs="<script type=""text/javascript""> MagicSlideshow.options = {'speed': 10, 'effect': 'fade'} </script>"
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptionsjs="<script type=\"text/javascript\"> MagicSlideshow.options = {'speed': 10, 'effect': 'fade'} </script>";
Magic Scroll ™
Magic Scroll allows you to quickly scroll through multiple images with lots of custom options.
Integration instructions
- Download the Magic Scroll zip file from the Magic Toolbox site.
- Upload the /magicscroll/ folder to your store root, this is the folder that contains the files magicscroll.js, magicscroll.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicscroll/magicscroll.css" />
- For the ASP version, open vsadmin/includes.asp and add the lines
magictoolbox="MagicScroll"
magictooloptionsjs="<script type=""text/javascript"">MagicScroll.options = {'item-tag' : 'img'}</script>"
- For the PHP version, open vsadmin/includes.php and add the lines
$magictoolbox="MagicScroll";
$magictooloptionsjs='<script type="text/javascript">MagicScroll.options = {"item-tag" : "img"}</script>';
- Now in your store control panel add the images to the Large Image and Giant Image fields that you want to show on the product detail page.
- Magic Scroll comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""speed:5000; width:auto"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="speed:5000; width:auto"';
Magic 360 Plus ™
Magic 360 Plus allows your customers to spin your product pictures for a 360º view and then zoom in on the finer details.
Integration instructions
- Download the Magic 360 Plus zip file from the Magic Toolbox site.
- Upload the /magic360plus/ folder to your store root, this is the folder that contains the files magic360plus.js, magic360plus.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magic360plus/magic360plus.css" />
- For the ASP version, open vsadmin/includes.asp and add the lines
magictoolbox="magic360plus"
magic360images=32
where 32 is the number of images that make up your 360º presentation
- For the PHP version, open vsadmin/includes.php and add the lines
$magictoolbox="magic360plus";
$magic360images=32;
where 32 is the number of images that make up your 360º presentation
- Now in your store control panel add one image to the Large Image field, for example largeimage01.jpg and one image to the Giant Image field, for example giantimage01.jpg. The system assumes that the rest of your images will be sequentially named eg. largeimage02.jpg, largeimage03.jpg etc so you don't need to add them all.
- Magic 360 Plus comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""spin:hover; autostart:true"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="spin:hover; autostart:true"';
Magic 360 ™
Magic 360 allows your customers to spin your product pictures for a 360º view.
Integration instructions
- Download the Magic 360 zip file from the Magic Toolbox site.
- Upload the /magic360/ folder to your store root, this is the folder that contains the files magic360.js, magic360.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magic360/magic360.css" />
- For the ASP version, open vsadmin/includes.asp and add the lines
magictoolbox="magic360"
magic360images=32
where 32 is the number of images that make up your 360º presentation
- For the PHP version, open vsadmin/includes.php and add the lines
$magictoolbox="magic360";
$magic360images=32;
where 32 is the number of images that make up your 360º presentation
- Now in your store control panel add one image to the Large Image field, for example largeimage01.jpg and one image to the Giant Image field, for example giantimage01.jpg. The system assumes that the rest of your images will be sequentially named eg. largeimage02.jpg, largeimage03.jpg etc so you don't need to add them all.
- Magic 360 comes with a large number of tweaks that we have also made available. The list is available here.
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magictooloptions="rel=""spin:hover; autostart:true"""
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magictooloptions='rel="spin:hover; autostart:true"';
Combine Magic Scroll ™ with other tools
It is possible to combine Magic Scroll with other Magic Toolbox features to have both showing for the same product.
View Magic Scroll combined with Magic Thumbs demo
Integration instructions
- Download the Magic Scroll zip file from the Magic Toolbox site.
- Upload the /magicscroll/ folder to your store root, this is the folder that contains the files magicscroll.js, magicscroll.css and the /graphics/ folder (not all the example files).
- Open the file proddetail.asp / proddetail.php and before the closing </head> tag add the following line
<link type="text/css" rel="stylesheet" href="magicscroll/magicscroll.css" />
as well as the other Magic Toolbox feature you are using eg
<link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" />
- For the ASP version, open vsadmin/includes.asp and add the line
magicscrollthumbnails=TRUE
...along with the Magic Toolbox option of your choice, for instance...
magictoolbox="MagicZoomPlus"
- For the PHP version, open vsadmin/includes.php and add the lines
$magicscrollthumbnails=TRUE;
...along with the Magic Toolbox option of your choice, for instance...
$magictoolbox="MagicZoomPlus";
- For the ASP version, open vsadmin/includes.asp and add the following for example (this is just an example and is not required unless you want to tweak the display)
magicscrollthumbnailsjs="<script type=""text/javascript"">MagicScroll.options = {'height':100,'width':300}</script>" .
- For the PHP version, open vsadmin/includes.php and add the following for example (this is just an example and is not required unless you want to tweak the display)
$magicscrollthumbnailsjs="<script type=\"text/javascript\">MagicScroll.options = {'height':100,'width':300}</script>"; - Please note, when using Magic Scroll as a thumbnail viewer, do not set the item-tag parameter to "img", as doing so will stop Magic Scroll displaying
CSS tweaks
You can also tweak the layout by using the following
table.imgtable
This governs the table properties around the MagicToolbox images and can be added to your main css file.
You can also tweak the style of the thumbnails but this is carried out through vsadmin/includes.asp:
thumbnailstyle="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;"
or through vsadmin/includes.php with the addition of:
$thumbnailstyle="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;";
Troubleshooting
- To remove the red "Please upgrade" text, you will need to buy a license from Magic Toolbox.
