Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

Posted

I have installed this contrib and it looks great!! This is an awsome effect. The enlarged product image pops up in the center of the page when you mouse over the image. The problem I am having is that this only works in Internet Exploroer. When I use Opera, Mozilla, or Netscape the image opens directly over the small image and pushes it further down the page and looks absolutely horrible. The code seems to include instuctions for all browsers, but something is not right. This contrib is mostly javascript and should be able to be fixed but I can't get it right, so far!

 

Do you know what's wrong? Please post if you have any idea what might help!

 

Thank you

James Tomasello

Posted

 

 

I have not made any progress with the code, but I read somewhere that netscape prefers layers instead of div's. Is this true for Mozilla and Opera too? I'm lost right now. here is the code that should control the image. Have a look and let me know if you see anything wrong.

 

<script language="javascript">


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

function ietruebody(){
return (document.compatMode!="BackCompat")? 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="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close X</span></div><img src="'+which+'">'
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")

 

I would like to have this work for all popular browsers. Please if you know how to do this post something! You don't have to tell me how, but a shove in the right direction would be great.

 

Thank you!

James Tomasello

Posted

I found this other peice of code. This goes along with the javascript i posted earlier.

 

<div id="showimage"></div>
<script language="javascript"><!--
document.write('<?php echo '<a href="'. DIR_WS_IMAGES . $product_info['products_image'].'" onClick="return enlarge(\\\''. DIR_WS_IMAGES . $product_info['products_image'].'\\\',event,\\\'center\\\','.$size[0].','.$size[1].')" >' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], $product_info['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . TEXT_CLICK_TO_ENLARGE .'</a>'; ?>');

//--></script>

James Tomasello

  • 2 months later...
Posted

Hi there

 

 

Firstly -- great mod... works great

 

question -- Anyway i can get this to work on the index of my store, i have "newest products" on my index...

 

cheers

 

Oky

-0-+-_-

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...