X-Cart forums - FORGET all the detailed images THIS IS THE ONE

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - FORGET all the detailed images THIS IS THE ONE (https://forum.x-cart.com/showthread.php?t=13042)

FORGET all the detailed images THIS IS THE ONE

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.

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!

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...

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....

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

You are using some other mod, right?

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...

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

Thanks, very nice work!

SWEET MOD!!!

Thanks,
Rich

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

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

People who are really interested in buying your products, will disable their blocker. Otherwise they are not really interested. Its just a commercial thing. Dont worry about the blockers...

Wow! Impressive. I like it a lot, but I don't think I would use the onmouseover. I would use onclick. Things poping up "unexpectedly" may resemble spyware activity, besides my FF blocked the popup.

I do like it though esspecially auto closing the window when going out of focus.

Yeah, thats possible too, just change the onmouseover....

I wouldn't want to turn away a single customer because they "thought" I was creating popups on their computer. Popups are the WORST thing to happen to the internet.

Well here's a new one. This one will popup even if there is a popupblocker activated. (SO THIS IS REALLY THE ONE)

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





{literal}<head><script language="JavaScript" type="text/javascript">

// hier definieer je alle afbeeldingen

var afbeeldingen=new Array(){/literal}

{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}{literal}



afbeeldingen[{/literal}{%image.index%}{literal}]=["{/literal}product_image.php?imageid={$images[image].imageid}{literal}", "#"] // "pad en naam van de foto", "eventuele hyperlink"

{/literal}{/if}{/if}{/section}{literal}

var voorladen="ja" // "ja" of "nee"

var optlinktarget="" // optioneel: hier kun je een target invullen bij framesgebruik

var beeldrandbreedte=0

var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.2)"



// hieronder niets wijzigen



if (voorladen=="ja"){

for (x=0; x<afbeeldingen.length; x++){

var ditbeeldje=new Image()

ditbeeldje.src=afbeeldingen[x][0]}}



function beeldcode(dezeafbeelding){

var beeldhtml=""

if (dezeafbeelding[1]!="")

beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'

beeldhtml+='[img]'+dezeafbeelding[0]+'[/img]'

if (dezeafbeelding[1]!="")

beeldhtml+='</a>'

return beeldhtml}



function wijzigbeeld(beeldplaatsing, beeldindex){

if (document.getElementById){

var imgobj=document.getElementById(beeldplaatsing)

if (imgobj.filters && window.createPopup){

imgobj.style.filter=filterstring

imgobj.filters[0].Apply()}

imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])

if (imgobj.filters && window.createPopup)

imgobj.filters[0].Play()

return false}}

</script></head>

<body>{/literal}

{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}



{literal}

<a href="#" onMouseover="wijzigbeeld('beeldplaatsing',{/literal}{%image.index%}{literal})">

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

{/literal}{/if}{/if}{/section}{literal}









<center>

<div id="beeldplaatsing" style="width:1px;height:1px"></div>

</center>

</body>

{/literal}

</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}

SEE IT LIVE http://www.weckonline.nl

Tell me what you think of it....

EASTER was very productive for me....

Greetz

Hi weckie

Wow!!! Very Impressive mod, and i think the second way looks better. But how do you change where you would like the image to popup, say just above the thumbnail.

Very nice work

doesnt seem to work in FF 1.02.

I rollover and it appears, but the image appears underneath the text for each of the sections below. the image and text overlap.

anyone else have this issue?

Yea, same for me in Firefox. The first version crashes Firefox, the second one has the issues mentioned above.

i am sorry, i only have netscape and IE, in those it works perfect. Just keep in mind that most (normal) customers dont even know that there are other browsers. I dont know how to change the mod to make it suitable for third party browsers.

And uhh, ZARDOS, i will have a look at it.....

http://www.w3schools.com/browsers/browsers_stats.asp

Unfortunately, i'd have to disagree. Look at 2005 stats, 20+% are using FireFox.

Thats alot of people.

20%+ are computer nerds like you and me.... Normal CUSTOMERS use IE and much less are using Netscape.

But hey, you don't have to use the mod if you dont want to. I am just trying to do something for xcart owners. its free to use not a duty....

Yup, im just informing them that it doesnt work in FF. and that FF users "may" account for a substantial number of their visitors.

nothing more. Free mods are a great part of this forum.

Cheers!

No one is bashing your mod Herman, it is indeed a good one. It is just important to consider all platforms and browsers when designing a mod. The Firefox users may not be important for you, but for some people that 20% IS their customer base.

Hi ETInteractive.com

Weckie's mod works OK for me in FF-102, and IE. All images popup in the top right corner perfectly and yet if i go to weckie's site the images do as ETInteractive.com said they show below the thumb nail and the text overlaps :roll:

hi zardos,

Thats because you are using the first verion of the mod. There's a new version wich does not interfere with popup blockers. But still the first works for you, that means you dont have a popup blocker installed....

i have a solution to over come the problem in FF.

Look for the next line:

Code:

<div id="beeldplaatsing" style="width:1px;height:1px"></div>

you can find it at the bottom of the mod. Change the width and height pixels to the values of your largest image. This wil solve the problem i think, i cannot test it because i dont have FF. Let me know if this works...

When you change it to suit it. There will be an empty space as large as your largest image.

100 million times better!!!!! I will apply this as soon as I get home.

You can download Firefox here (free):

http://www.mozilla.org/products/firefox/

Hi weckie

As got0pless says 100 million times better!!!!! , using your second mod now with popup blocker in FF-102. Great :lol:

well i have downloaded FF and i saw the problem.
BTW The image downloading in FF is much faster as IE.

I will try to find a solution to get rid of the white space. Trying to get it done without the white area. I will do that some other time because in holland it is now over midnight and i have to open my business tomorrow morning, so i will go to sleep.

Cu L8ter.

Now to get rid of them being clickable? I noticed when you click on an images, it refreshes the page.

It does not refresh the page when you click on the images, it just goes to the top of the page.

....

To my eyes it was the same thing. Now, how to eliminate it?

Hi weckie

I really like this MOD, and I really like your shop design!

Could you possibly tell me how you make your product listing page

http://weckonline.nl.server1.firstfind.nl/weckonline/home.php?cat=251

look like that.

I love the sub-categories, and I love the layout of the products. Are these standard MODs or something you have invented yourself ( I am using the fashion mosaic template like you)

Thanks for any help

Conrad Winchester

hmm, i have changed somethings but i think i didn't change anything in the productlisting. In the general settings there's an option to display the products under each other or next (3) to each other.

I moved the featured products above the (tell a friend)
You can do this in the product.tpl

It doesn't work for me for some reason, My detail image section display nothing, I noticed the array afbeeldingen was empty on my page

Doesn't work in html version of the store

The mod worked very well in the php version of our store, but for some reason it doesn't show any images in the html version of the store. So we had to revert back to the x-cart version of the detailed images module so that the images will be viewable to our html customers.

Hi Jeff
Your site has pagerank 0 which is the same as mine, but you have 18 customers at the time I visted your site, I wish I had that many customers too, Could you share some the tricks for advertising your site :lol:

Google adwords drives most of our traffic

Don't want to get off topic from this main thread, but I'll answer your question.

Nothing magic as to how we are getting people to our store - our online store is about a month old and we spend about $100 per day on Google adwords, which drives a lot of our traffic to the site. For example, as of right now (10:45 pm pm central time) we have had 356 clicks today from 18.600 impressions, costing just under $100. We also get a decent amount of free hits from yahoo and msn and froogle, where we get pretty high positions for various keyword searches.

We have been picking up about 10-15 new buying customers per day off of the site, which is in addition to our regular or non-website customers. So we've been pretty pleased with the success of our X-cart store thus far, but we work every day on improving it - which is why we tried this MOD for detailed images.