FORGET all the detailed images THIS IS THE ONE

weckie · #1 03-27-2005, 10:50 AM

Hi,

Finally i have made a detailed images onmouseover popup with automatic popup window closing. This one should work on every version of xcart, still i have only tried it on version 4.0.12.

Here's what to do, it is very simple. In your modules/Detailed_Product_Images directorie, first backup your PRODUCT_IMAGES.TPL
Then create a new one with this data, and thats it. THATS REALLY it. So very simple, even the newbies can do this.

Code:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}
{if $images ne ""}
{capture name=dialog}
<CENTER>
<DIV
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}

{literal}
<head>
<script language="Javascript" type="text/javascript" >
//aan te passen
vanaf_links = 0;
vanaf_boven = 0;
grootste_breedte  = 400+20;//afmetingen van het grootste beeld +20
grootste_hoogte = 369+20;  //afmetingen van het grootste beeld +20
//hieronder niets wijzigen 
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+grootste_breedte+',height='+grootste_hoogte+',left='+vanaf_links+',top='+vanaf_boven;
var optIE='scrollbars=no,width=150,height=100,left='+vanaf_links+',top='+vanaf_boven;
function popBeeld(BeeldURL,BeeldTitel){
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 aanpassen_aan_beeldgrootte(){');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["BeeldNaam"].width;');writeln('window.innerHeight=document.images["BeeldNaam"].height;}}');
writeln('function maak_titel(){document.title="'+BeeldTitel+'";}');writeln('</sc'+'ript>');
writeln('</head><body bgcolor=FFFFFF scroll="no" onload="aanpassen_aan_beeldgrootte();maak_titel();self.focus()" onblur="self.close()">');
writeln('[img]+BeeldURL+[/img]</body></html>');
close(); 
}}
</script>
</head>{/literal}

{literal}
<body>

[img]{/literal}product_image.php?imageid={$images[image].imageid}{literal}[/img]
</BODY>

{/literal}
{/if}
{/if}
{/section}
</DIV>
{/capture}
{if $smarty.capture.dialog ne ""}
{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}
{/if}
{/if}

Well, please let me know what you think of it.
See a running demo at http://weckonline.nl.server1.firstfind.nl/weckonline/product.php?productid=16144&cat=251&page=1

HAVE FUN and greetings from HOLLAND.
ps. let me know if you are going to use it, i would love to see it.

pengrus · #2 03-27-2005, 10:57 AM

Herman,

That looks great!! I certainly would like to try it. Did you use any other mod in order to use this? How did you ge the thumbnails for the detailed images? I think the default x-cart does not generate the thumbnails for detailed images. Please advise.

Thank you!

weckie · #3 03-27-2005, 11:03 AM

Well. i used the smarty tags wich are already called in the product_images.tpl.

Just replace your product_images.tpl with the one provided, and it works. GREAT isn't it.

greetz...

weckie · #4 03-27-2005, 11:06 AM

BTW X cart creates everything what is needed tot display the product, you just have to use the smarty tags and place them were you want. for instance. if you want the product id directly under youre productimage, place the " {$productid} " were you want it. The output will be the productid....

pengrus · #5 03-27-2005, 11:06 AM

Well, I do not have product_images.tpl. I only have product_images.php.

You are using some other mod, right?

weckie · #6 03-27-2005, 11:09 AM

NO i am not using some other mod.

the product_images.tpl is located under skin1/modules/Detailed_Product_Images/product_images.tpl

you are running the same version as i do so it must be there...

pengrus · #7 03-27-2005, 11:14 AM

Got it. I went to x-cart/modules/detailed_images. It should be under skin1.

Thanks, very nice work!

dManager · #8 03-27-2005, 12:18 PM

SWEET MOD!!!

Thanks,
Rich

vulcan-works · #9 03-27-2005, 01:08 PM

the only problem with this is that most popup blockers block them.

g0t0pless · #10 03-27-2005, 02:59 PM

I had my hopes up until I saw my popup blocker killing each one.