Thanks funkydunk I was about to add this feature to a site I was working on, you saved me a bit of time.
I have taken your code and added a few other bits like adding a stripe to the list to make it easier to read in large product list and I have also added a bit of javascript to popup the thumbnail of the product if you put your mouse over the info image.
I am sure my code can be improved but I thought that I would post my mods here since Funkydunk was kind enough to share the original code.
This was the modification I made to the products.tpl template :- At the top I added the following javascript
:
Code:
{* $Id: products.tpl,v 1.36 2003/11/11 14:02:37 svowl Exp $ amended by funkydunk 2004 *}
{literal}
<script>
PositionX = 100;
PositionY = 100;
defaultWidth = 100;
defaultHeight = 100;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
function popupThumb(imageURL,imageTitle){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY)
{
posx = e.clientX;
posy = e.clientY;
if (isIE)
{
posx += document.body.scrollLeft+20;
posy += document.body.scrollTop;
}
}
var optIE='scrollbars=no,width=100,height=100,left='+posx+',top='+posy;
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+posx+',top='+posy;
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["plant"].width;');writeln('window.innerHeight=document.images["plant"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('[img]+imageURL+[/img]</body></html>');
close();
}}
</script>
{/literal}
To get the stripe add the code on line three of the following:
Code:
{section name=product loop=$products}
{counter assign="row"}
<tr {if $bg eq ""}{assign var="bg" value="1"} bgcolor="#FFFFFF"{else}{assign var="bg" value=""} bgcolor="#EEEEEE"{/if}>
Then to open the thumbnail image on mouse over change the line
As you might of noticed from the code above this works with the thumbnail images outside of the database and with the images named after the productcode. Unfortunately I haven't got the time just now to make this more generic as I have other modification I need to make for the site I am working on but hopefully this might come in useful for somebody.