Magic Toolbox

Image zoom for LiteCommerce

2010-10-29T17:37:00.011+01:00

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'.

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

Automatically load images from a folder

2010-06-25T16:21:00.024+01:00

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.

Download this file: magicslideshow.php
Upload that file to your website.

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');
?>

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.

Magic Zoom on NetObjects Fusion

2009-08-29T09:58:00.002+01:00

Every one of our tools can be used on any website.

NetObjects Fusion is a popular WYSIWYG editor and web developer Thomas Frei-Herrmann has written detailed instructions for the use of Magic Zoom™ in NetObjects Fusion.

Installation instructions - German
Installation instructions - English (Babelfish translation)

These instructions can easily be used for our other tools - Magic Thumb™, Magic Magnify™, Magic Zoom Plus™, Magic Magnify Plus™ and Magic Touch™.

Thank you Thomas.

How to add Magic Thumb with Dreamweaver

2008-12-30T11:40:00.003+00:00

Two minute video tutorial shows you how to use Magic Thumb with Dreamweaver.

The movie is 3.2MB so it might take a couple of minutes to download.

How to use Magic Magnify on Blogger

2008-12-22T03:16:00.001+00:00

Magic Magnify is a cool effect that magnifies images to reveal beautiful detail.

1. Get a Magic Magnify license. Either a demo, commercial or non-commercial.

2. Upload magicmagnify.swf and magicmagnify.js to a website. There is no facility to upload JS files to Blogger, so you must upload the 2 files to one of your other websites.

3. Go to your admin area for Blogger and click Layout then click Edit HTML. Add the following line just below the <head>, changing the file location to wherever you uploaded your JS and SWF files to:

<script src="http://www.example.com/magicmagnify.js" type="text/javascript"></script>

4. Go to a post. Click Edit Html. Add Magic Magnify to an image by linking your small image to your large image like so:

<a href="http://www.example.com/large.jpg" class="MagicMagnify"><img src="http://www.example.com/small.jpg" /></a>

For more help, email Magic Toolbox.

Example

Hover over the image: