C
corymac
Hello,
I've customized the panview code to accommodate what I want it to do,
but I'm having a problem with it in IE. Firefox works fine.
Panning the image in IE doesn't work and I think it has something to
do with scrollTop, but i have no idea what to do to fix it. If I
take the pan image code out of the html page and have it by itself it
works.
I'd appreciate any help with this! Code and links are below.
Thank you!
Brady
The first thumbnail image is the to test.
With HTML: DOES NOT WORK
http://www.organizedmadness.com/pan/merchant.mvc.htm
Without HTML: WORKS
http://www.organizedmadness.com/pan/merchant_mini.mvc.htm
"jQuery.fn.panview = function(target){
num = 0;
return this.each(function(){
new jQuery.panview(this,target);
});
}
jQuery.panview = function(obj,target){
var bigImage = $("#"+target).get(0);
$("img", obj).mouseover(function(){
MM_swapImage('myimage','',this.src,
0);
var scaleY =
Math.round(bigImage.offsetHeight/
this.offsetHeight);
var scaleX =
Math.round(bigImage.offsetWidth/this.offsetWidth);
$("img", obj).mousemove(function(e){
this.style.cursor =
'pointer';
scrollY = e.pageY -
this.offsetTop - 10;
scrollX = e.pageX -
this.offsetLeft - 20;
bigImage.scrollTop =
scrollY * scaleY;
bigImage.scrollLeft =
scrollX * scaleY;
});
});
$("img", obj).mouseout(function(){
$("img", obj).unbind("mousemove");
MM_swapImgRestore();
bigImage.scrollTop=0;
bigImage.scrollLeft=0;
});
}
I've customized the panview code to accommodate what I want it to do,
but I'm having a problem with it in IE. Firefox works fine.
Panning the image in IE doesn't work and I think it has something to
do with scrollTop, but i have no idea what to do to fix it. If I
take the pan image code out of the html page and have it by itself it
works.
I'd appreciate any help with this! Code and links are below.
Thank you!
Brady
The first thumbnail image is the to test.
With HTML: DOES NOT WORK
http://www.organizedmadness.com/pan/merchant.mvc.htm
Without HTML: WORKS
http://www.organizedmadness.com/pan/merchant_mini.mvc.htm
"jQuery.fn.panview = function(target){
num = 0;
return this.each(function(){
new jQuery.panview(this,target);
});
}
jQuery.panview = function(obj,target){
var bigImage = $("#"+target).get(0);
$("img", obj).mouseover(function(){
MM_swapImage('myimage','',this.src,
0);
var scaleY =
Math.round(bigImage.offsetHeight/
this.offsetHeight);
var scaleX =
Math.round(bigImage.offsetWidth/this.offsetWidth);
$("img", obj).mousemove(function(e){
this.style.cursor =
'pointer';
scrollY = e.pageY -
this.offsetTop - 10;
scrollX = e.pageX -
this.offsetLeft - 20;
bigImage.scrollTop =
scrollY * scaleY;
bigImage.scrollLeft =
scrollX * scaleY;
});
});
$("img", obj).mouseout(function(){
$("img", obj).unbind("mousemove");
MM_swapImgRestore();
bigImage.scrollTop=0;
bigImage.scrollLeft=0;
});
}