View Single Post
  #1  
Old 08-18-2003, 07:31 AM
  carlisleglass's Avatar 
carlisleglass carlisleglass is offline
 

eXpert
  
Join Date: Aug 2003
Location: Carlisle, UK
Posts: 316
 

Default Detailed Images Popup with Automatic Window Sizing

This is my mod to do it ... difference is the popup window resizes to the size of the image. UPDATED: Previously the window resizes after the image was loaded, which would not work on some browsers, code has been changed so that the window opens the correct size and doesn't require a resize! I havn't tested it on mozilla thou, but should work. Can jpsowin please comment if this new method works. Thanks

create a new file called 'view_product_image.php' in the main xcart directory with the following content :

Quote:
<HTML>
<HEAD>
<TITLE>
<?php echo $product . " - " . $imagename ?>
</TITLE>
<Script>
function picloaded() {
picture.alt = "";
}
</script>
</head>
<BODY leftmargin=0 topmargin=0 onload="picloaded()">
[img]product_image.php?imageid=<?php echo $imageid ?>[/img]
</body>
</html>

Next, modify customer/main/product.tpl by removing the existing link to the detail product images and placing the following just under the product thumbnail:

Quote:
{if $active_modules.Detailed_Product_Images ne ""}
{include file="modules/Detailed_Product_Images/product_images_links.tpl" product=$product.product}
{/if}

Now create a file called product_images_links.tpl in modules/Detailed_Product_Images/ with the following content

Quote:
{if $images ne ""}
{literal}
<script>
function viewpic(imageid,imagename,imagex,imagey) {
url = "/view_product_image.php?imageid=" + imageid + "&imagename=" + imagename + "&product={/literal}{$product}{literal}";
window.open (url, null,"width=" + imagex + ",height=" + imagey + ",left=20,top=20");
}
</script>
{/literal}
<table width=90% cellpadding=0 cellspacing=0 border=0>
<tr><font color="#ff0000">Detailed Images</font></td></tr>
<tr><td class=Line height="1">[img]{$ImagesDir}/spacer.gif[/img]</td></tr>
<tr><td><font size="1"></font></td></tr>
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
<tr><td>{$images[image].alt}</td></tr>
{/if}
{/section}
</table>
{/if}


And thats it .. you might want to change the product_images_links.tpl template to match the style of your site.

Examples ...

A product with detailed images
http://shop.cglass.co.uk/customer/product.php?productid=16138&cat=&page=

A product with no detailed image
http://shop.cglass.co.uk/customer/product.php?productid=16242&cat=&page=
Reply With Quote