EidolonNight Posted March 20, 2006 Posted March 20, 2006 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 Quote James Tomasello
ekahefe Posted March 20, 2006 Posted March 20, 2006 Can you share a link so I can see what it looks like? It sounds like something I might love! :blush: Quote
EidolonNight Posted March 20, 2006 Author Posted March 20, 2006 Can you share a link so I can see what it looks like? It sounds like something I might love! :blush: Sure!! http://bcpframeshop.com/catalog/product_in...roducts_id=2915 Quote James Tomasello
EidolonNight Posted March 28, 2006 Author Posted March 28, 2006 Sure!! http://bcpframeshop.com/catalog/product_in...roducts_id=2915 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! Quote James Tomasello
EidolonNight Posted March 28, 2006 Author Posted March 28, 2006 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> Quote James Tomasello
oky Posted June 3, 2006 Posted June 3, 2006 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-+-_- Quote
Recommended Posts
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.