製品ページをカスタマイズしようとしている 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 の変更後にマウスオーバー時にズームされた画像が表示されないという問題がまだあります...