Dynamic drive like detailed images mod

weckie · #1 05-17-2005, 12:37 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>{$lng.lbl_zoom}

{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
[img]{$images[image].tmbn_url}[/img]
{/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...

weckie · #2 05-17-2005, 12:38 PM

PS. Please give me your web adresses, i like to see it working elsewhere....

weckie · #3 05-17-2005, 12:59 PM

In answer to Loony2nz here's how to change location of the images

in the home.tpl find:

Code:

crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"

change it to:

Code:

crossobj.style.left=20+"px"
crossobj.style.top=50+"px"

you can use your own position by changing the values.

That will be it.
uhm, yes, I have putted the ZOOMING text in to the code above.

zardos · #4 05-17-2005, 04:50 PM

Hi weckie

Thankyou for you time and effort weckie,

My site is below and is not live, have a look around.
Thanks again.

Online Michael · #5 05-17-2005, 05:53 PM

No doubt about it, I can see this becoming a very popular mod particularly for those stores who like to have multiple detailed images like mine. Weckie, you have done a wonderful job here mate and I for one congratulate you on a marvelous effort.

Now that we have the building blocks in place, I guess it wonБ─≥t take long before people start making enhancements to it. So as time moves on, this little baby will only get better and better. Can't wait to use it. Must try it out tonight.

Just one little problem I noticed is that whenever any dropdown list boxes happen to be displayed on a page that they seem to appear in the foreground as the detailed image is displayed. How can this be overcome?

Otherwise a superb mod, weckie, simply superb.

weckie · #6 05-18-2005, 12:11 AM

Thanks for appreciation all.

Quote:

whenever any dropdown list boxes happen to be displayed on a page that they seem to appear in the foreground as the detailed image is displayed. How can this be overcome?

I noticed this too. I dont know how to overcome this, maybe somewhone else. Would be a fine tuning to overcome this.

weckie · #7 05-18-2005, 12:23 AM

Zardos, i have had a look on your site, works great....

Online Michael · #8 05-18-2005, 03:29 AM

In addition to the dropdown list box showing in front of the image, Fancy Categories is also doing the same thing. Any clues anyone?

jdiehl · #9 05-18-2005, 06:37 AM

I'm not currently playing or implementing this mod. But I have had issues before with certain things that are placed via CSS not showing layers in the correct order. I believe this has something to do with default settings on the z-index. For example if you don't set the z-index on an object explicity, then your browser might just decide that forms or certain other objects are important enough to be on top and thus puts them there.

Just a suggestion of something to play with to see if you can get around it, only because I've had issues with other objects similar to this in the past. I might be way off base.

IndieDepot · #10 05-18-2005, 12:01 PM

My goodness. I love this Mod. it was one of the easiest (and fastest) to install yet delivers a HUGE AMOUNT of functionality for my upcoming website design.

Kudos to you weckie!

- Shannon