Php 使用Magento中的缩略图切换基础图像

在一个定制的产品视图页面上，我正在处理的是基本图像（大图像）和缩略图列表，它们是媒体库中与产品相关的其他图像（它们只是普通图像，而不是定义的缩略图），我的任务是得到它，这样当你点击缩略图时，它就会改变上面的基础图像

我已经开始工作了，但是我有一个问题，当我更改图像时，它更改为非常像素化的图像，原始的基础图像是737x578，因此我知道如果图像较小，它将被拉伸，但是缩略图来自的图像与原始基础图像的大小大致相同，只是它们的尺寸被重新调整为48x48

查看Firefox中“查看图像信息”中的信息可以看出，图像的src来自magento缓存（媒体/目录/产品/缓存/1/缩略图/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进行哪些更改？显然，仅仅更改标记中的src属性是不够的。

单击缩略图图像时，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>

---

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>

jQuery很好，我只需要更新目标类：

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});

---

我已经换掉了代码，但是现在当我点击时，图像一点也没有改变，同样在PHPStorm中（我用它来编写代码），数据主图像src高亮显示，当我将鼠标悬停在上面时，它说“这里不允许属性数据主图像src”，我只是将php和javascript块粘贴到PHPStorm中，两者都没有给我一个错误。可能是复制粘贴错误？基本上，您在php块中所做的只是向现有img元素添加一个新的数据属性：您使用的是旧版本的phpstorm吗？这是几年前的一个已知错误，似乎已经修复：。另外，检查你的javascript控制台，看看javascript错误是什么，然后请发布……我所有的老师和关于编程的讲座都告诉我的一条规则，“永远不要复制和粘贴代码”，似乎这是一个复制和粘贴问题，现在可以了，谢谢

<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="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'large', $_image->getFile())->resize(560, 393)?>"

$j(".product-image-thumbs li img").click(function(){
    $j("#image-main").attr("src", $j(this).attr("data-main-image-src"));
});