Ecommerce Templates
Use these instructions to add our tools to your Ecommerce Templates (ECT) store.
Version 6.1
If you use Ecommerce Plus 6.1 or newer, support for our tools is built in as standard.
Simply follow the official integration instructions.
Version 6.0 or older
If you use an old version of Ecommerce Templates (ECT) prior to version 6.1, you can install our tools using the instructions below (though we recommend you upgrade to the latest version of Ecommerce Plus and benefit from the built-in support for our tools).
The instructions are for Magic Zoom Plus™, but are identical for Magic Zoom™, Magic Magnify™, Magic Magnify Plus™, Magic Thumb™ and Magic Touch™. Just replace the references to magiczoomplus with whichever tool you choose to use.
ASP version
- Download the zip file for the tool you wish to install:
- Unzip the file and upload the magiczoomplus folder to the root of your website.
- Backup your proddetail.asp page.
- Open the proddetail.asp page and add this code before the </head>:
<script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
<link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
- Backup your incproddetail.asp page.
- Open the incproddetail.asp page and find the lines (near lines 169-185) with this code:
and
sub showdetailimages()
and update the code to be like this:response.write " "
sub showdetailimages()
if NOT (trim(rs("pLargeImage")&"")="" OR trim(rs("pLargeImage")&"")="prodimages/") then
if trim(rs("pLargeImage2")&"")<>"" OR trim(rs("pGiantImage")&"")<>"" then response.write "<table border=""0"" cellspacing=""1"" cellpadding=""1""><tr><td>"
response.write "<a href="""&rs("pGiantImage")&""" class=""MagicZoom MagicThumb"" id=""zoom1""><img src="""&rs("pLargeImage")&""" border=""0"" alt="""&strip_tags2(rs(getlangid("pName",1))&"")&""" /></a>"
' new code here **********************
if trim(rs("pLargeImage2")&"")<>"" OR trim(rs("pGiantImage")&"")<>"" then
response.write "</td></tr><tr><td align=""center"">"
if rs("pGiantImage")<>"" AND rs("pLargeImage")<>"" then response.write "<a href="""&rs("pGiantImage")&""" rev="""&rs("pLargeImage")&""" rel=""zoom1""><img src="""&rs("pLargeImage")&""" style=""width:75px;padding:3px"" border=""0"" /></a>"
if rs("pGiantImage2")<>"" AND rs("pLargeImage2")<>"" then response.write "<a href="""&rs("pGiantImage2")&""" rev="""&rs("pLargeImage2")&""" rel=""zoom1""><img src="""&rs("pLargeImage2")&""" style=""width:75px;padding:3px"" border=""0"" /></a>"
if rs("pGiantImage3")<>"" AND rs("pLargeImage3")<>"" then response.write "<a href="""&rs("pGiantImage3")&""" rev="""&rs("pLargeImage3")&""" rel=""zoom1""><img src="""&rs("pLargeImage3")&""" style=""width:75px;padding:3px"" border=""0"" /></a>"
if rs("pGiantImage4")<>"" AND rs("pLargeImage4")<>"" then response.write "<a href="""&rs("pGiantImage4")&""" rev="""&rs("pLargeImage4")&""" rel=""zoom1""><img src="""&rs("pLargeImage4")&""" style=""width:75px;padding:3px"" border=""0"" /></a>"
if rs("pGiantImage5")<>"" AND rs("pLargeImage5")<>"" then response.write "<a href="""&rs("pGiantImage5")&""" rev="""&rs("pLargeImage5")&""" rel=""zoom1""><img src="""&rs("pLargeImage5")&""" style=""width:75px;padding:3px"" border=""0"" /></a>"
response.write "</td></tr></table>"
end if
' end new code **********************
elseif NOT (trim(rs("pImage")&"")="" OR trim(rs("pImage")&"")="prodimages/") then
response.write "<img id=""prodimage"&Count&""" class=""prodimage"" src="""&rs("pImage")&""" border=""0"" alt="""&strip_tags2(rs(getlangid("pName",1))&"")&""" />"
else
response.write " "
- Test your changes to check that everything is how you want it.
- That's it!
- To upgrade from the demo version, buy a license and overwrite the demo /magiczoomplus/magiczoomplus.js file with the one from your licensed version.
PHP version
- Download the zip file for the tool you wish to install:
- Unzip the file and upload the magiczoomplus folder to the root of your website.
- Backup your proddetail.php page.
-
Open the proddetail.php page and add this code before the </head>:
<script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>
<link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
- Find file where function showdetailimages() is defined. Very often this is vsadmin/inc/incproddetail.php one. Backup it
- Find following code in this file:
and update it with contents of this file
function showdetailimages(){
...}
- If you are using tool different from Magic Zoom Plus then just specify it in the following line:
$magictoolbox_product = 'MagicZoomPlus';
- Test your changes to check that everything is how you want it.
- That's it!
- To upgrade from the demo version, buy a license and overwrite the demo /magiczoomplus/magiczoomplus.js file with the one from your licensed version.
Please contact us with any questions you have about installing our tools.
Big thanks to Barry Smith for creating this “how to” guide to adding image zoom to ECT.
Installation of Magic Slideshow™ or Magic Scroll™
There is no step-by-step tutorial for Magic Slideshow™ or Magic Scroll™, but both these tools can be added to your ECT site manually.
Please refer to the installation guides and contact us if you get stuck. We can answer questions or we can do the whole installation for you.
Contact us if you need help.
About
These instructions are for Ecommerce Templates. Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers.
Payment
Pay by credit card or bank transfer, then download your product.
100% Support
30 minutes free technical support.
Guarantee
30 day money-back guarantee.