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
|