Jquery jQZoom:remove（）和img src更改后的innerzoom问题

我有一个magento在线商店，在那里我试图定制产品页面

在页面上，我有带有jqZoom的主产品图像，还有由magento生成的缩略图，带有一个onmouseover函数，可以更改主图像

经过长时间的功能和代码更改，今天我在MacBook的两个浏览器中都能正常工作，但在我测试的任何其他计算机上都存在问题

在第一次加载时，第一个图像加载得很好，缩放效果也很好，但一旦鼠标移过图像并更改图像，大多数浏览器上的缩放效果就不再有效

代码如下：

。 . . . 在标题中，我添加了以下内容：

<script>
$('imgzoom').ready(function(){  
var options = {  
        zoomType: 'innerzoom',
        title:false,  
        lens:false,  
        preloadImages: true,  
        alwaysOn:false,  
        zoomWidth: 300,  
        zoomHeight: 400,  
        xOffset:10,  
        yOffset:0,  
        position:'left'  
        //...MORE OPTIONS  
};  
jQuery('.imgzoom').jqzoom(options);   
});  
</script>


<script>
function startzoom() {  
var options = {  
        zoomType: 'innerzoom',
        title:false,  
        lens:false,  
        preloadImages: true,  
        alwaysOn:false,  
        zoomWidth: 300,  
        zoomHeight: 400,  
        xOffset:10,  
        yOffset:0,  
        position:'left'  
        //...MORE OPTIONS  
};  
jQuery('.imgzoom').jqzoom(options);  
};  
</script></code>

$（'imgzoom'）.ready（函数（）{
变量选项={
zoomType:“innerzoom”，
标题：假，
镜头：错，
这是真的，
奥尔韦森：错，
动物宽度：300，
动物体重：400，
xOffset:10，
约夫特：0，
位置：'左'
//…更多选择
};  
jQuery（'.imgzoom'）.jqzoom（选项）；
});  
函数startzoom（）{
变量选项={
zoomType:“innerzoom”，
标题：假，
镜头：错，
这是真的，
奥尔韦森：错，
动物宽度：300，
动物体重：400，
xOffset:10，
约夫特：0，
位置：'左'
//…更多选择
};  
jQuery（'.imgzoom'）.jqzoom（选项）；
};  

。 . . . . 这是magento用来为产品生成链接和大图像的代码

<p class="product-image product-image-zoom">
<?php
    $_img = '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" class="imgzoom" rel="gal1" title="MYTITLE" id="imglink"><img width="380" name="img1" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" /></a>';
    $imagehelper = $_helper->productAttribute($_product, $_img, 'image');
    echo $imagehelper;
?>
</p>

。 . . . . 这是缩略图中的foreach循环，它进行了所有更改

    <?php
        ++$i;
    ?>
    <script>
        function update_img<?php echo $i; ?>()
        {
            //$.jqzoom.disable('.jqzoom')
            //jQuery('.imgzoom').disable('.imgzoom');  
            jQuery('.imgzoom').remove();
            jQuery('.product-image.product-image-zoom').append('<?php echo $imagehelper; ?>');
            img1.src =  "<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>";
            jQuery('#imglink').attr('href', '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>');
            startzoom(); 
            //jQuery('#imgholdwrap').attr('style', 'width: 100%; height: 570px');
            return false;

        }
    </script>
       <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=450,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img onmouseover="update_img<?php echo $i; ?>()" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" width="66" height="100" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>

函数更新\u img（）
{
//$.jqzoom.disable（“.jqzoom”）
//jQuery（'.imgzoom'）。禁用（'.imgzoom'）；
jQuery（'.imgzoom'）.remove（）；
jQuery（'.product image.product image zoom'）.append（''）；
img1.src=“”；
jQuery（'#imglink'）.attr（'href'，''）；
startzoom（）；
//jQuery（'#imgholdwrap'）.attr（'style'，'width:100%；height:570px'）；
返回false；
}

。 . .

我认为主要的问题是，在我移除jQzoom和我将其添加回来之间的某个地方，图片的高度没有正确传输，因此调用了该函数，但jQzoom生成的&的高度为0，如果您将代码检查器中的设置更改为某个px值，则缩放将工作，但是这幅画没有被正确地剪掉

以下是网站上产品的链接：

p、 最终，我需要将缩放图片显示为标准（在图片右侧），但是，当我将设置设置为标准时，没有显示带有缩放图片的窗口，z索引是否会出现一些问题

p、 这是我第一次使用javascript或jQuery，所以我是一个完全的n00b

更新： 发现一些与IE不兼容的代码，很容易被替换

 img1.src =  "<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>";

img1.src=”“；

原来IE无法将新src分配给id“IMG1”，将其改写为：

document.getElementById('img1').src =  "<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>";

document.getElementById（'img1'）.src=“”；

---

某些版本的Chrome仍然存在问题，在src更改后，它不会在鼠标上显示缩放的图像…

我使用了以下方法：

jQuery(document).ready(function(){
    // activate on mouseover since IE8/9 don't seem to fire it automatically.
    jQuery(".product-image").on('mouseover',function(){
        jQuery(".jqzoom").jqzoom(options);
    })
});

以及：

jQuery(document).ready(function(){
    jQuery(".thumbnail").click(function(){
        var smallUrl = jQuery(this).attr('data-img-small');
        var bigUrl = jQuery(this).attr('data-img-big');
        // Remove the old/default image. 
        jQuery(".jqzoom").remove();
        // Add the desired images back in from the thumbnails
        jQuery(".pad-image").append('<a href="'+bigUrl+'" class="jqzoom"><img src="'+smallUrl+'"/></a>');
        // Turn it off, wait for next `mouseover`.
        jQuery(".jqzoom").off();
    });
})

jQuery（文档）.ready（函数（）{
jQuery（“.缩略图”）。单击（函数（）{
var smallUrl=jQuery（this.attr（'data-img-small'）；
var bigUrl=jQuery（this.attr（'data-img-big'）；
//删除旧/默认图像。
jQuery（“.jqzoom”）.remove（）；
//从缩略图中重新添加所需的图像
jQuery（“.pad image”）.append（“”）；
//关闭它，等待下一个“鼠标悬停”。
jQuery（“.jqzoom”）.off（）；
});
})

这在其他浏览器中似乎运行得很好

---

我将

数据img small

和

数据img big

属性设置为缩略图，使用

显示：无在需要的地方，我还没有看到任何不良行为。
谢谢你，你的代码的第一部分，以及图像的src中的更改修复了它！