php - 在 Magento 中使用缩略图切换基本图像

Question

在定制的产品 View 页面上，我正在处理基本图像(大图像)和缩略图列表，这些缩略图是媒体库中与产品相关的其他图像(它们只是普通图像和不是定义的缩略图)，我的任务是获取它，以便当您单击缩略图时它会更改上面的基本图像

我可以正常工作，但是我有一个问题，当我更改图像时，它更改为非常像素化的图像，基本图像最初是 737x578，所以我知道如果图像较小，它会被拉伸(stretch)，但是缩略图来自的图像与原始基本图像的大小大致相同，只是它们的大小已重新调整为 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 属性是不够的

Answer 1

当您单击缩略图时，您的 jQuery 会将主图像的 src 设置为缩略图 src(48x48)。单击缩略图应将主图像设置为缩略图的大尺寸。

因此您需要一种从缩略图元素中引用大图像 src 的方法。您可以在缩略图图像元素内创建一个名为 data-main-image-src 的属性，以便稍后在 jQuery 中引用它:

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