Magic Zoom Plus™ for eCommerceTemplates

Zoom and expand your images in Ecommerce Templates.

Hover or click the image! Like it? Download the eCommerceTemplates module.

ASP version

These instructions will install Magic Zoom Plus™ on the ASP version of ecommercetemplates (ECT). If you use the PHP version, please contact us and we will help you. Big thanks to Barry Smith for creating this “how to” guide.

1. Download Magic Zoom Plus™ (demo version).
2. Upload these files to your website:
   • magiczoomplus.js
   • magiczoomplus.css
   • cursor (folder)
   • graphics (folder)
   • img (folder)
3. Backup your proddetail.asp page.
4. Open the proddetail.asp page and add this code before the </head>:

   <script src="magiczoomplus.js" type="text/javascript"></script>

   <link href="magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>

5. Backup your incproddetail.asp page.
6. Open the incproddetail.asp page and find the lines (near lines 169-185) with this code:

   sub showdetailimages()

   and

   response.write "&nbsp;"

   and update the code to be like this:

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

7. Test your changes to check that everything is how you want it.
8. To upgrade, buy Magic Zoom Plus™ and overwrite the magiczoomplus.js file with the same file from the full version.

These instructions are specific to the Ecommerce Templates shopping cart.