2

私が取り組んでいるカスタムメイドの製品ビュー ページには、ベース イメージ (大きいイメージ) と、メディア ギャラリー内の製品に関連付けられた他のイメージであるサムネイルのリストがあります (これらは通常のイメージであり、定義されたイメージではありません)。サムネイル）、私が任されたのは、サムネイルをクリックすると上のベース画像が変更されるようにすることです

私はそれが機能していますが、問題があります。画像を変更すると、変更される画像は非常にピクセル化されたものになります。ベース画像はもともと737x578であるため、画像が小さい場合は引き伸ばされることを理解していますが、サムネイルの元となった画像は、元のベース画像とほぼ同じサイズですが、48x48 にサイズ変更されているだけです。

Firefoxの「画像情報を表示」の情報を見ると、画像のsrcがmagentoキャッシュ（media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/）からのものであり、私が持っている元のファイルからのものではないことがわかりますメディアフォルダに

ベースイメージはこのように作成されています

<a class="product-image image-zoom" id="main-image" title="<?php echo $this->htmlEscape($_product->getImageLabel()); ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>">
    <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(737, 578).'" width="737" height="578" alt="'.$this->htmlEscape($_product->getImageLabel()).'" title="'.$this->htmlEscape($_product->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</a>

サムネイルがこのように生成されている間

<ul id="image-list">
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />

        </li>
    <?php endforeach; ?>
</ul>

これは、画像を切り替えるために使用しているjavascriptです

    jQuery(document).ready(function()
    {
        jQuery("#image-list li img").click(function()
        {
            jQuery("#main-image img").attr("src", jQuery(this).attr("src"));
        });
    });

ベース画像をサムネイルで使用される元の画像に置き換えるには、JavaScript にどのような変更を加える必要がありますか?明らかに、タグの src 属性を変更するだけでは十分ではありません。

4

2 に答える 2

5

サムネイル画像をクリックすると、jQuery はメイン画像の src をサムネイル画像 src (48x48) に設定します。サムネイルをクリックすると、メイン画像がサムネイル画像の大きなサイズに設定されます。

そのため、サムネイル画像要素内から大きな画像 src を参照する方法が必要です。後で jQuery で参照できるように、サムネイル画像要素内に data-main-image-src のような属性を作成できます。

<ul id="image-list">
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <img data-main-image-src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(737, 578)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(48); ?>" width="48" height="48" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
        </li>
    <?php endforeach; ?>
</ul>

次に、jQuery を次のように変更して、メイン イメージの src をより大きなイメージに変更します。

jQuery(document).ready(function()
{
    jQuery("#image-list li img").click(function()
    {
        jQuery("#main-image img").attr("src", jQuery(this).attr("data-main-image-src"));
    });
});
于 2012-11-01T04:25:37.853 に答える
1

マニシエの答えはほとんどうまくいきました.Magentoのバージョン1.9では少し違うかもしれません. PHPを次のように更新しました。

<ul class="product-image-thumbs">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
            <li>
                <img data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
            </li>
        <?php endif; ?>
    <?php $i++; endforeach; ?>
</ul>

主な変更点は、私が呼び出した方法にありますdata-main-image-src。何らかの理由で、Manishie のバージョンでは、すべてのサムの現在のメイン img の src を呼び出していました。代わりに、彼が親指で呼び出したのと同じ方法を使用しましたが、代わりに大きな画像を呼び出しました。

data-main-image-src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>"

jQuery は問題ありませんでしたが、対象となるクラスを更新するだけで済みました。

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});
于 2016-02-11T10:05:04.357 に答える