Hey all
Im having a problem… Ok, this is the situation…
I have a small product image, on which ive floated a div over it, and
defined it as draggable. Now, this works, and i can drag it around no
problem. great. but then, what i want to do is, based on the location of
that dragable element from the top and the left, to move (using the
Effect.MoveBy method) a larger image - so effective its a detail viewer.
But, ive come into problems. I can get the logic to work out exactly
where the box is, but when i go to movve it, it works perfectly on the
first go, but on subsequent moves it goes the wrong way?!
My javascipt is…
var oiX = 0;
var oiY = 0;
function setOldVars(){
oiX = $(‘squ’).style.top;
oiY = $(‘squ’).style.left;
iX = oiX.replace(‘px’, ‘’);
iY = oiY.replace(‘px’, ‘’);
//$(‘ggggg’).innerHTML = 'X: ‘+iX+’ Y: '+iY;
}
function moveProductImage(x, y, prod){
var nX = x.replace(‘px’, ‘’);
var nY = y.replace(‘px’, ‘’);
//var nxpos=0, nypos=0;
if(nY < iY){
nypos = nY - iY;
// 25 -
} else if(nY > iY){
nypos = iY - nY;
}
if(nX < iX){
nxpos = nX - iX;
} else if(nX > iX){
nxpos = iX - nX;
}
new Effect.MoveBy(prod, (nxpos2.5), (nypos2.5));
//new Effect.Move (prod,{ x: 10, y: 10, mode: ‘absolute’});
//$(‘squ’).style.top = nX+‘px’;
//$(‘squ’).style.left = nY+‘px’;
//$(‘ggggg’).innerHTML = ‘iX: ‘+iX+’ iY: ‘+iY+’ nX: ‘+nX+’ nY: ‘+nY+’
nypos:’+nypos+’ nxpos:’+nxpos;
}
and my HTML is…
<div id="shoppcon">
<p>| <%=link_to('Add to basket', :action => 'addtobasket', :id =>
params[:id])%> |
<%=link_to(‘Checkout’, :action => ‘checkout’)%> |
<div id="small" style="background-image: url(<%=url_for(:controller
=> ‘shop’, :action => ‘thumb’, :id => params[:id] + ‘.jpg’)%>);">
<div id="inspector">
<div id="enlargement">
<%=image_tag(url_for(:controller => 'shop', :action => 'image',
:id => params[:id] + ‘.jpg’), { :id => ‘productlarge’ })%>
Large view open
If anyone has any ideas at all that would be great… im sure its a
math related problem but i just cant see it!!
Many thanks
Tim P.