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