FORGET all the detailed images THIS IS THE ONE

Loony2nz · #51 05-17-2005, 08:17 AM

Quote:

Originally Posted by weckie

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

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!

Online Michael · #52 05-17-2005, 08:46 AM

Weckie,

YOU DID IT!!! YOU ARE A BLOODY LEGEND MATE!!!

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.

Great work!

weckie · #53 05-17-2005, 12:24 PM

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

weckie · #54 05-17-2005, 12:36 PM

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

cellula · #55 05-20-2005, 02:07 PM

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

weckie · #56 05-20-2005, 11:25 PM

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

tntdesigns · #57 05-22-2005, 04:29 PM

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

Online Michael · #58 05-24-2005, 04:23 AM

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

shirley2005 · #59 07-06-2005, 11:40 PM

Only the first one works for me.

shirley2005 · #60 07-06-2005, 11:48 PM

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.