2

製品ページをカスタマイズしようとしている magento オンライン ストアがあります。

このページには、jqZoom を使用したメインの製品画像と、メイン画像を変更する onmouseover 関数を使用して、magento によって生成されたサムネイルがあります。

今日、機能とコードを変更する長い日を経て、MacBook の 2 つのブラウザーですべてが機能するようになりましたが、テストした他のコンピューターには問題があります。

最初の読み込みでは、最初の画像が完全に読み込まれ、ズームが機能しますが、マウスオーバーして画像が変更されるとすぐに、ほとんどのブラウザーでズームが機能しなくなります。

コードは次のとおりです。

. . . . 頭の中で私はこれを追加しました：

<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-indexに問題がある可能性があります?

ps2. JavaScript や jQuery を扱うのはこれが初めてなので、私はまったくの初心者です。

更新: 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 の変更後にマウスオーバー時にズームされた画像が表示されないという問題がまだあります...

4

1 に答える 1

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;、必要に応じて使用しましたが、望ましくない動作は実際には見られませんでした。

于 2012-11-14T03:19:36.200 に答える