Jquery Joomla Opera IE问题的Jqzoom实现

我已经在基于Joomla的网站上实现了jQzoom插件。除了IE和Opera这两个最新版本外，它在所有浏览器上都非常有效。似乎它没有正确地获取鼠标位置。虽然我在非joomla站点上测试了相同的布局和选项，但一切都很好，所以我真的不知道。以下是我使用Jqzoom的方法： 左边的主产品图像和左边的附加图像，它们都位于一个500px的容器中，这个容器位于一个700px的容器中，剩下的200px是一个位置：固定菜单

<div id="targetDiv" style="float:left;min-width:350px;min-height:499px;max-width:350px;max-height:499px;margin-bottom:10px;margin-right:20px;">
<a href="" class="zoom">
<?php echo ps_product::image_tag( $product_full_image, 'class="productImage" alt="'.$product_name.'" title="'.$product_name.'"', 0 ); ?>
</a>
</div>
<div id="addimg" style="height:499px;width:45px;float:left;margin:0px;">
<?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>
</div>

这就是我如何调用Jqzoom和在其他图像之间切换的脚本

jQuery(document).ready(function($) {
    $(document).ready(function() {
        var url = $('.zoom img').attr('src');
        $('a.zoom').attr('href', url);
        $('.zoom').jqzoom();
        $('#addimg a').wrap('<div class="addimg" />');
        $('img.productImage').attr({'width':'350', 'height':'499'});
    });
});

function showDiv(objectID,imgName) {
    var theElementStyle = document.getElementById(objectID);
    theElementStyle.innerHTML = "`<a class='zoom' href='"+imgName+"'><img src='"+imgName+"' border='0' width='350' height='499'></a>`";
    jQuery(document).ready(function($) {
        $(document).ready(function() {
            $('.zoom').jqzoom();
        });
    });
}

jQuery（文档）.ready（函数（$）{
$（文档）.ready（函数（）{
var url=$（'.zoom img'）.attr（'src'）；
$（'a.zoom'）.attr（'href'，url）；
$（'.zoom'）.jqzoom（）；
$（'#addimg a'）。换行（''）；
$（'img.productImage'）.attr（{'width'：'350'，'height'：'499'）；
});
});
函数showDiv（objectID，imgName）{
var theElementStyle=document.getElementById（objectID）；
theElementStyle.innerHTML=“`”；
jQuery（文档）.ready（函数（$）{
$（文档）.ready（函数（）{
$（'.zoom'）.jqzoom（）；
});
});
}

Opera和IE不会正确显示缩放弹出框，它始终会弹出到图像的右侧，即使我将其设置为左侧，但底部仍然有效。看起来，大图像似乎占据了所有空间。我完全糊涂了

我知道变焦的整个想法是使用img加载一个小图像 并用锚点将缩放指向大图像。我所做的是，我没有能力在Virtuemart中加载中等大小的图像。这就是为什么我加载大图像，然后用jQuery调整它的大小，然后我将img的src分配给a的href，这就是它的工作方式

它正确加载脚本，但在Opera和IE中，即使鼠标离开图像，脚本仍在运行。您可以在其中一个打印屏幕上看到它，但它没有正确获取鼠标位置。我认为这可能是因为图像的大小调整，但加载一个较小的图像让我无所适从，缩放仍然在图像外部工作，并显示图像周围的白色

---

我希望至少有人能给我指出一个解决办法。在过去的两天里，我一直在用power google搜索，没有发现有人有同样的问题。这不是一份商业工作，这是我自己的项目…希望在你的帮助下我能找到解决方案。

你知道吗？我放弃了修复jqzoom的想法，决定自己编写一个jqueryzoom，它可以在每个浏览器和joomla网站上完美地工作。我在几个小时内完成了编写，并致力于实现更多功能，因此，如果有人需要它，请随意使用此脚本作为启动程序。我所做的基本上是： 我有一张图片，大的，用jquery将它调整到所需的尺寸。 在它附近我有一个位置：绝对div，其中包含全尺寸图片。简单明了。更难的是让缩放的图片显示鼠标指向的确切位置。公式是-（从左/上到缩放div的“px”量+鼠标坐标*2）+缩放div宽度/高度的一半。我乘以鼠标坐标，因为缩放图片正好是小图片的两倍。但它似乎也适用于其他维度。代码如下：

$(document).ready(function(){
var marginLeft = $('#pop img').offset().left;
var marginTop = $('#pop img').offset().top;
var windowHalf = $('#pop').width() /2;
var windowHalfV = $('#pop').height() /2;
 $("#test").mousemove(function(e){
var x = (marginLeft - (e.pageX - this.offsetLeft) * 2)+windowHalf;
var y = (marginTop -(e.pageY - this.offsetTop)*2)+ windowHalfV;
var one = $('#pop img').offset();
  $('#log').html(x +', '+ y);
  $('#log2').html(one.left+', '+ one.top);
  $('#pop img').offset({top: y, left: x});   

   });
  });