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.

Automatically load images from a folder

A popular request for Magic Slideshow is to automatically fetch images from a folder.

You can do this in a variety of ways, depending upon the applications available on your web server. Many of our customers use PHP, so we have prepared advice to fetch images using PHP.

1. Download this file: magicslideshow.php
2. Upload that file to your website.
3. Add the following code to your HTML page/template where you want your slideshow to appear.
   

   <php
   include('/path/to/magicslideshow.php');
   MagicSlideshow('/path/to/image/folder', 'http://example.com/path/to/image/folder');
   ?>
   

   
   
4. Change the code to the full path of the folder where you uploaded the magicslideshow.php file.

For Smarty templates, you should use '{php}' and '{/php}' instead of <php and ?>.

Please contact us if you would like further help.

Magic Slideshow is our JavaScript image carousel that slides or fades one image to another. It uses JavaScript, CSS and clean semantic HTML to provide a smooth looking effect with text descriptions, thumbnails and arrows for navigation. Try out these examples.