Dynamic drive like detailed images mod

ttg · #21 06-21-2005, 04:39 AM

Hi all,

I am desperate for some help in regards to this mod.

I have implemented it into my site using the {%image.index%} method whereby the shopper clicks on the numbered index, instead of a thumbnail, but wanted to know how I could get this mod to have individually named links that popup the 2nd, 3rd, 4th etc but not the first (the first will always be displayed when shopper clicks to view product details)

All help will be greatly recieved. cheers

(I'm running 4.013)

ttg · #22 06-22-2005, 01:49 AM

anyone?

Online Michael · #23 07-11-2005, 07:28 AM

Ok, I have a fix I would like to share that will overcome the quantity/amount selectbox problem appearing in the foreground. Basically what this little fix does is it hides the selectbox while the detailed image is displayed and then enables it again when the image is gone.

Insert the following JavaScript code:

Code:

if (ie && !selecthidden) //This will hide the selectbox because IE ignores z-index for selectboxes
	{
	savedhtml = document.all['selectboxfix'].innerHTML;
	document.all['selectboxfix'].innerHTML	= "<span onclick='restoreSelect()'>"+document.forms['orderform'].elements['amount'].value+"";
	selecthidden = true;
	}

Just below the following lines of script in the home.tpl file:

Code:

function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){

Now insert the following line:

Code:

<div id="selectboxfix">

Just below the following lines in the product.tpl file:

Code:

<SCRIPT type="text/javascript" language="JavaScript 1.2">
var min_avail = {$start_quantity|default:1};
var avail = {$mq|default:1}-1;
var product_avail = {$product.avail|default:"0"};
</SCRIPT>

That's it

mmondala · #24 08-04-2005, 09:15 PM

Hi weckie,

This is a great mod. Unfortunately, it does not work when I applied it. All I get is a blank screen on my Detailed Images section. the pictures disappear when this is applied.

What am I doing wrong? My current version of x-cart is 4.0.14. Can you please help me out. Thank you.

Quote:

Originally Posted by weckie

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

gearboxpc · #25 08-14-2005, 03:59 PM

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!

slade · #26 08-14-2005, 04:45 PM

hi i was wonering if theres any way to customise this mod so instead of the image appearing is it posible for the image to load in the detailed image area?

gearboxpc · #27 08-15-2005, 08:37 PM

Have you installed this on your site? Try this link to view how it works.

http://www.gearboxpc.com/xcart/product.php?productid=16135&cat=0&page=1

It does put in the detailed image section.

slade · #28 08-20-2005, 04:14 AM

hey gearbox nah i havnt seen that mod cud ya give me the link to the forrum

pinnacle · #29 09-24-2005, 06:24 PM

gearboxpc, i would like information on that mod as well!

weckie · #30 10-02-2005, 09:00 AM

got another great one.
have a look at www.weckonline.nl

greetz