Jqzoom 对 Joomla Opera IE 问题的实现

Question

我已经在基于 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();
        });
    });
}

Opera 和 IE 无法正确显示缩放弹出框，即使我将其设置在左侧，它总是会弹出到图像的右侧，但底部可以。看起来好像大图像占用了所有空间。我完全糊涂了。

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

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

我希望任何人至少可以指出我的解决方案。我花了过去 2 天的电源谷歌搜索，我还没有发现任何人有同样的问题。这不是商业工作，这是我自己的项目...希望我能在您的帮助下找到解决方案。

Answer 1

你知道吗？我放弃了修复 jqzoom 的想法，决定自己写一个 jquery zoom，它在每个浏览器和 joomla 网站上都能完美运行。我写了几个小时，并致力于实现更多功能，所以如果有人需要它，请随意使用这个脚本作为入门。我所做的基本上是这样的： 我有一张图片，大的，用 jquery 调整它到需要的尺寸。 在它附近我有一个 position:absolute 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});   

   });
  });