Ecommerce Templates > General Help > Magic Toolbox

Magic Toolbox Integration

Magic Toolbox

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.

View all Magic Toolbox demos

Please note these do require a minimum version of Ecommerce Plus 6.1 and from April 2016 Version 5 of the MagicToolbox tools.

Magic Zoom Plus ™

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.

View Magic Zoom Plus demo

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 MagicZoomPlus Version 5.0 or above the syntax is slightly different...

    magictooloptions="data-options=""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"';

    For MagicZoomPlus Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="disable-zoom:true; opacity:65; expand-effect:bounce"';

Top of page


Magic Zoom ™

Magic Zoom Plus

Magic Zoom allows your customers to view magnified product images and choosing between the thumbnails you define in your store control panel.

View Magic Zoom demo

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 MagicZoom Version 5.0 or above the syntax is slightly different...

    magictooloptions="data-options=""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"';

    For MagicZoom Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="opacity:65; zoom-fade:false"';

Top of page


Magic Thumb ™

Magic Thumb

Magic Thumb allows your customers to switch between your thumbnail product pictures, enlarge them and then run them like a slideshow.

View Magic Thumb demo



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 MagicThumb Version 5.0 or above the syntax is slightly different...

    magictooloptions="data-options=""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"';

    For MagicThumb Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="expand-speed:5000; swap-image:mouseover"';

Top of page

 


Magic Slideshow ™

Magic slideshow

Magic Slideshow allows you to show smooth scrolling images of your products pictures.

View Magic Slideshow demo



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 MagicSlideshow Version 5.0 or above the syntax is slightly different...

    magictooloptions="data-options=""expand-speed:5000; effect:fade"""

  • 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>";

    For MagicSlideshow Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="expand-speed:5000; effect:fade"';

Top of page


Magic Scroll ™

Magic Scroll

Magic Scroll allows you to quickly scroll through multiple images with lots of custom options.

View Magic Scroll 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" />

  • For the ASP version, open vsadmin/includes.asp and add the lines

    magictoolbox="MagicScroll"

  • For the PHP version, open vsadmin/includes.php and add the lines

    $magictoolbox="MagicScroll";

  • 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 MagicScroll Version 2.0 or above the syntax is slightly different...

    magictooloptions="data-options=""speed:5000; width:auto"""

    To specify the number of thumbnails use

    magictooloptionsjs="<script type=""text/javascript"">MagicScrollOptions = { items:3 }</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)

    $magictooloptions='rel="speed:5000; width:auto"';

    For MagicScroll Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="speed:5000; width:auto"';

    To specify the number of thumbnails use

    $GLOBALS['magictooloptionsjs']='<script type="text/javascript">MagicScrollOptions = { items:3 }</script>';

Top of page


Magic 360 ™

Magic 360 Plus

Magic 360 allows your customers to spin your product pictures for a 360º view.

View Magic 360 demo



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 Magic360 Version 5.0 or above the syntax is slightly different...

    magictooloptions="data-options=""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"';

    For Magic360 Version 5.0 or above the syntax is slightly different...

    $magictooloptions='data-options="spin:hover; autostart:true"';

Top of page


Combine Magic Scroll ™ with other tools

Magic Scroll

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

Top of page


Magic ToolBox on the products page

In version 6.3 we added the ability to add Magic ToolBox effects to the products page. To enable this feature you'll need add the following to vsadmin/includes.asp

magictoolboxproducts="MagicZoomPlus"

or to includes.php

$magictoolboxproducts="MagicZoomPlus";

...where "MagicZoomPlus" is the image effect you are using. You will also need to copy the corresponding css line from the detail page to the products page eg. add <link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css" /> before the </head> tag of products.asp or products.php.

If you need to change the variables add this to includes.asp for example

magictooloptionsproducts="data-options=""expand-speed:5000; swap-image:mouseover"""

or to includes.php

$magictooloptionsproducts='data-options="expand-speed:5000; effect:fade"';

To show thumbnails on the products page add the following to vsadmin/includes.asp

thumbnailsonproducts=TRUE

or to includes.php

$thumbnailsonproducts=TRUE;

To style the thumbnail appearance you will need something like this in includes.asp

thumbnailstyleproducts="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;"

or in includes.php

$thumbnailstyleproducts="width:75px;padding:3px;margin:3px;border: 1px solid #ccc;";


Top of page

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;";

Top of page


Troubleshooting

  • To remove the red "Please upgrade" text, you will need to buy a license from Magic Toolbox.