Image zoom for LiteCommerce

Now it's easy to add image zooming to the products on your LiteCommerce store! (demo)
Installation instructions
1. Download Magic Zoom™ (trial version).
2. Copy these two files to your website:

• magiczoom.js
• magiczoom.css

3. Open the file 'skins/[skin_name]/[lang]/main.tpl' and add references to magiczoom.js and magiczoom.css before following line:
</HEAD>
(This is similar to the standard installation instructions for Magic Zoom™).
4. Open the file 'skins/[skin_name]/[lang]/product_details.tpl' and replace following line:
<img src="{product.imageURL}" border=0 alt="">
with these 3 lines:
<a class="MagicZoom" href="{product.imageURL}">
<img src="{product.thumbnailURL}" border=0 alt="{product.name:h}">
</a>
The default template code should look like this:
<td IF="product.hasImage()" valign=top align="left" width=100>
<a class="MagicZoom" href="{product.imageURL}">
<img src="{product.thumbnailURL}" border=0 alt="{product.name:h}">
</a>
</td>
If you want to add description under the image, use the '{description:h}' template parameter inside the span tag i.e.
<a class="MagicThumb" href="{product.imageURL}">
<img src="{product.thumbnailURL}" border=0 alt="{product.name:h}">
<span>{description:h}</span>
</a>
5. To change the default settings of Magic Zoom™, open the 'main.tpl' file and before the </head> tag, add the parameters you wish to change using this format:
<script type="text/javascript">
MagicZoom.options = {
'zoom-height' : '250px',
'zoom-width : '350px',
'opacity-reverse' : 'true'
}
</script>
6. Enjoy!

You can use the same instructions above to install any of our 6 tools. Just replace the references to 'MagicZoom' with those of the product you wish to use e.g. 'MagicTouch'.

• Magic Zoom™
• Magic Zoom Plus™
• Magic Magnify™
• Magic Magnify Plus™
• Magic Thumb™
• Magic Touch™

LiteCommerce is a free Ecommerce CMS solution including shopping cart software.