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)

Thanks Jeff for the info, frankly speaking I don't think this mod will work because I end up having 2 head tag, 2 body tag at one page by following this mod strictly step by step
Just FYI, cartmods advanced image manager suppose to do the same thing, if my site made a cent for me definetly it is justified to purchase a commericial mod

I tried it and can safely say it doesn't work. No image(s) shown at all. I'm wondering if it may have anything to do with the free Tabbed Menu Mod I am using? Shame though, looks like a really nice mod. :cry:

Just cant seem to get this one working?! I just seem to get a blank detailed image box! anyone tell me what Im doing wrong?? Everyone else seems to have it working ok why can't I?? :cry:

Very cool mod Herman (Tof, prachtig).

I'm not a programmer at all. I'm just a simple retailer from Belgium who lives in Canada.
What would be great about this (detailed images) mod is if you could just display thumbnails in the "detailed images" section. This would increase the loading speed of the product pages a lot. Only when you click on the thumbnails, a detailed large image would load.
Maybe I'm just dreamin here now?

I have to say again, GREAT JOB!!! (Prachtig Werk)

Groeten, Kristiaan

Quote:

Originally Posted by lusterca

What would be great about this (detailed images) mod is if you could just display thumbnails in the "detailed images" section. This would increase the loading speed of the product pages a lot. Only when you click on the thumbnails, a detailed large image would load.

I couldn't agree with you more! I have been looking for this type of mod for a while now. Even tried to adapt a few that were close, but with no success. Has anyone managed to create thumbnails in the detailed image page and then enlarge them when clicked?

this would be great to implement

I think i can do this.

I will try it later on when i get home tonight.

Weckie, if you can adapt this DynamicDrive script to X-Cart, you'll be a legend mate. Even if you fail, post what you have and perhaps, collectively, we could all have a go until one of us manages to get it to work. We just need someone to give a red hot go.

ALL RIGHT i did it....

I now must have a look on what i did. I will create a manual later on tonight.

Have a look at http://weckonline.nl.server1.firstfind.nl/weckonline/product.php?productid=16200&cat=252&page=1

IT WORKS GREAT....

Wow Herman, NICE JOB!!!

Now if you could load thumbnail images in your detailed image section, this would be a great help to make you site load a lot faster.

I'm honest about this, I would not know where to start with programming.

(Nederland Boven!!!!)

Groeten, Kristiaan.

Quote:

Originally Posted by weckie

Downright awesome! One minor change I would suggest. Have the image centered with each click to enlarge. Right now I have to drag it to the left.
Also, you might want to have some text to CLICK TO ZOOM or something. Right now, there's no information on how to get it to enlarge.

Other than that.....simply AWESOME!

KUDOS!

Weckie,

YOU DID IT!!! YOU ARE A BLOODY LEGEND MATE!!! :D I can't believe how quickly you got it working. Sure a few minor touches are needed, but what you achieved here is truely amazing. =D> Great work!

well i am home now.

it is now (in the netherlands) 22:25, so give me 15 minutes and i'll post the way you have to do it....

HERE IS HOW TO DO IT... <<<<<< BACKUP FIRST >>>>>>>>>

Put following code into your customer/home.tpl right after <HEAD>

Code:

{literal}

<style type="text/css">



#showimage{

position:absolute;

visibility:hidden;

border: 1px solid pink;

}



#dragbar{

cursor: hand;

cursor: pointer;

background-color: #EFEFEF;

min-width: 100px; /*NS6 style to overcome bug*/

}



#dragbar #closetext {

font-weight: bold;

margin-right: 2px;

}

</style>





<script type="text/javascript">



/***********************************************

* Image Thumbnail viewer- б╘ Dynamic Drive (www.dynamicdrive.com)

* Last updated Sept 26th, 03'. This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/



var ie=document.all

var ns6=document.getElementById&&!document.all



function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body

}



function enlarge(which, e, position, imgwidth, imgheight){

if (ie||ns6){

crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage

if (position=="center"){

pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)

horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2

vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2

if (window.opera && window.innerHeight) //compensate for Opera toolbar

vertpos=pgyoffset+window.innerHeight/2-imgheight/2

vertpos=Math.max(pgyoffset, vertpos)

}

else{

var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX

var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY

}

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"



crossobj.innerHTML='<div align="left" id="dragbar">Slepen/Drag<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Sluiten/Close</span> </div>[img]'+which+'[/img]'

crossobj.style.visibility="visible"

return false

}

else //if NOT IE 4+ or NS 6+, simply display image in full browser window

return true

}



function closepreview(){

crossobj.style.visibility="hidden"

}



function drag_drop(e){

if (ie&&dragapproved){

crossobj.style.left=tempx+event.clientX-offsetx+"px"

crossobj.style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

crossobj.style.left=tempx+e.clientX-offsetx+"px"

crossobj.style.top=tempy+e.clientY-offsety+"px"

}

return false

}



function initializedrag(e){

if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){

offsetx=ie? event.clientX : e.clientX

offsety=ie? event.clientY : e.clientY



tempx=parseInt(crossobj.style.left)

tempy=parseInt(crossobj.style.top)



dragapproved=true

document.onmousemove=drag_drop

}

}



document.onmousedown=initializedrag

document.onmouseup=new Function("dragapproved=false")



</script>{/literal}

Put the following line in the same customer/home.tpl right after:
<BODY leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

Code:

<div id="showimage"></div>

Then replace your modules/Detailed_Product_Images/product_images.tpl with the one below.

Code:

{* $Id: product_images.tpl,v 1.12 2004/05/28 12:21:05 max Exp $ *}

{***

Created bij www.weckonline.com.  NOTE: This line must stay intact for free use. Thanks.  Herman Steijn.

***}

{if $images ne ""}

{capture name=dialog} 

<CENTER>

{section name=image loop=$images}

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

{if $images[image].tmbn_url}

<a href="#" onClick="return enlarge('product_image.php?imageid={$images[image].imageid}',event)">

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

{/if}

{/if}{/section}

{literal}

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

That must be it.

Please note that the comment line in the product_images.tpl must stay intact. I would appreciate it very much...

Good Luck.

PS. I will open a new topic about this mod. So in the future please refer to the new topic...

No Detailed Images

Great code, but on my site the detailed images are not showing up, whats wrong?

i think the problem is that this code works only if you store the images in your filesystem. In you admin find IMAGES LOCATION, change the settings there....

Has any one found out how to adjust where the image pops.
The image pops so low on the screen clients don't even see it.
Great mod
Thank's

In home.tpl, just change this:

Code:

crossobj.style.left=horzpos+"px" 

crossobj.style.top=vertpos+"px"

to this:

Code:

crossobj.style.left=335+"px"

crossobj.style.top=45+"px"

Obvously you will need to set your own co-ordinates. Enjoy :)

Only the first one works for me.

Hello, may I ask how you do about the detailed image in your site http://www.aerostich.com ?

Any other mod out there?

Thanks!

Quote:

Originally Posted by sstillwell@aerostich.com

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.

Thank you for the mod. It works fine in our store (4.0.14) and using the tabs menu.

However, I'm curious...

Is it possible somehow to make it so the FIRST detailed image remains regular size, while the 2nd, 3rd, etc. are small? For us, most of our products only use one image, but some use more.

Thank you.

Hey Weckie,

This is really exactly what I need. I know you saw my other post on Boomer's thread and I'm going to ask you here: is there any way that you can show me how to redo this code so that when you click on an image, you just get a normal pop-up window with scrollbars, and not a sort of CSS/DIV layer, which displays the enlarged image?

I figured it must be simple but I just can't get it to work (and I've tried it but to no avail, unfortunately).

Please let me know? It would be a lifesaver.

Thanks.

Also, where is the line where it generates the thumbnail sizes? I'm going to make them a lot larger. :)

Nevermind about the thumbnails, I found it.

Other question still holds though. :)

This is a great mod. Unfortunately, when I apply the code on modules/Detailed_Product_Images/product_images.tpl the images on the detailed product dissapear. I followed the steps carefully but have no luck on making it work.

My x-cart version is 4.0.14 gold. x-cart is applied to the root directory. My browser is IE 6. I checked my browser to see if I'm blocking any pop-ups but i'm not. I also checked weckie's website and I was able to view his site with the mouse over. When uploading my images to the detailed site I get the images from my local computer.

Do I have to modify any parameters to the code since my x-cart is installed from the root directory? I don't know what I'm doing wrong. Can somebody please help me figure this thing out? Thank you.

Check this previous post, is this your issue?

Quote:

Originally Posted by weckie

i think the problem is that this code works only if you store the images in your filesystem. In you admin find IMAGES LOCATION, change the settings there....

Hope this helps!

Re: FORGET all the detailed images THIS IS THE ONE

This mod looks wonderful.
Unfortunately, like several other previous posters, it only wipes out my detailed image on the product page.

I pasted the second version of weckie's "THIS IS THE ONE" rollover image code, changed my thumbs and detailed images to the files system, and still no luck. In place of the detailed image, I get white space with a piece of code.

Code:

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

](*,)

Anybody have an idea?

Re: FORGET all the detailed images THIS IS THE ONE

I too am having the same problem. Instead of showing the actual picture, it shows the line "[img]product_image.php?imageid=68[/img] [img]product_image.php?imageid=69[/img] [img]product_image.php?imageid=70[/img]"

Any Ideas?

Re: FORGET all the detailed images THIS IS THE ONE

Hello Weckie,

I have just discovered your custom mod that I tried to install on my test website. It doesn't work. I had a look on your site and would really like to install it.
Is it still possible to use this mod now and what t do, because in steps for example you say:
"Put the following line in the same customer/home.tpl right after:
<BODY leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

Code:
<div id="showimage"></div>", but I didn't see this line but this one:
"<body{$reading_direction_tag}{if $body_onload ne ''} onload="javascript:

{$body_onload}"{/if}>"
My question is to know if it is possible to match this mod with the x-cart version?

Best regards
jaliboglilim
X-cart 4.1.11