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加载一个小图像并使用锚点将缩放指向BIG图像。我做的是我没有能力在Virtuemart中加载中等大小的图像..这就是我加载大图像然后用jQuery调整大小的原因，然后我将img的src分配给a的href，这就是它的原理的工作原理。

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

我希望任何人都能至少指出我的解决方案。我花了最近2天的电力谷歌搜索，我没有找到任何有同样问题的人。这不是商业工作，这是我自己的项目......希望我能在你的帮助下找到解决方案。

Answer 1

你知道吗？我放弃了修复jqzoom的想法，并决定自己写一个jquery zoom，它在每个浏览器和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});   

   });
  });

Jqzoom实现到Joomla Opera IE的问题

1 个答案: