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

Question

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

我有这个工作但是我有一个问题，当我更改图像时，它更改为非常像素化的图像，基本图像最初是 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 属性是不够的

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

Answer 2

Manishie 的回答几乎对我有用，我想 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"));
});