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
</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'.
LiteCommerce is a free Ecommerce CMS solution including shopping cart software.
Posts
