jQZoom：remove（）和img src更改后的innerzoom問題

Question

我有一個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>

。 。 。 。 。 這是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>

。 。 。 。

我認為的主要問題是，在刪除jQzoom和將其重新添加之間的某個位置，圖片的高度無法正確傳輸，因此調用了該函數，但是jqZoom生成的＆的高度為0，如果將代碼檢查器中的設置更改為某個px值，則可以進行縮放，但是圖片未正確剪切

這是網站上產品的鏈接：http: //zeroinchapparel.com/index.php/men-short-sleeve/grand-experience.html

ps最終，我需要將縮放圖片顯示為“標准”（在圖片的右側），但是，當我將設置設為“標准”時，沒有顯示帶有縮放圖片的窗口，z索引可能存在一些問題？

PS2。 這是我第一次使用javascript或jQuery，因此我是一個完整的n00b！

更新：找到了一些與IE不兼容的代碼，這些代碼很容易被替換

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

事實證明IE無法將新的src分配給ID“ IMG1”，將其重寫為：

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

某些版本的Chrome仍然存在問題，更改src后在鼠標懸停時不會顯示縮放的圖像...

Answer 1

我使用了以下內容：

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();
    });
})

這似乎在其他瀏覽器上也能很好地工作。

我將data-img-small和data-img-big屬性設置為縮略圖圖像，使用display: none; 在需要的地方，而且我還沒有真正看到任何不良行為。