Zooming Thumbnail images in Xcart 3.4.0
 

Our customer site has a requirement for visually impaired users to be able to magnify thumbnails to a larger size.
A Q & D way of doing this is to amend product_thumbnail.tpl (skin1 directory) to use IE's zoom functionaility (only works in IE5.5 & above - sorry).

Original product_thumbnail.tpl :

{* $Id: product_thumbnail.tpl,v 1.8 2003/04/24 09:50:33 svowl Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y"}[img]{if $full_url}{$http_location}{else}..{/if}/image.php?productid={$productid}{if $file_upload_data.file_path}&tmp=y{/if}[/img]{/if}

All on one line - YUK!!

So amended to be more readable :

{* $Id: product_thumbnail.tpl,v 1.8 2003/04/24 09:50:33 svowl Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y"}
<img src="{if $full_url}{$http_location}{else}..{/if}/image.php?productid={$productid}
{if $file_upload_data.file_path}&tmp=y{/if}"
{if $image_x ne 0} width={$image_x}{/if}
{if $image_y ne 0} height={$image_y}{/if}
alt="{$product}" border=0>
{/if}


Now add the zoom function just before the border attribute (just above last {/if}
so ..code becomes

{* $Id: product_thumbnail.tpl,v 1.8 2003/04/24 09:50:33 svowl Exp $ *}
{if $config.Appearance.show_thumbnails eq "Y"}
<img src="{if $full_url}{$http_location}{else}..{/if}/image.php?productid={$productid}
{if $file_upload_data.file_path}&tmp=y{/if}"
{if $image_x ne 0} width={$image_x}{/if}
{if $image_y ne 0} height={$image_y}{/if}
alt="{$product}" onmouseover="this.style.zoom='300%'" onmouseout="this.style.zoom='normal'" border=0>
{/if}

You can make the zoom whatever % increase you like (image quality degrades rapidly much above 200%).

With a bit of thought, it'd be possible to use Javascript to make this applicable to other browsers.

Well...it's a start ....enjoy!


Lee D

Groovy simple mod, tecnically you can add a bit extra in there so the image grows to 300% too which is also a cool feature. Fantastic for breaking the display though!

Anyone seen the ZOOM in opera? Now that's how I.E should have done it!

Too bad it doesn't work with all browsers... that would be awesome if we could cook one up....