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

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