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

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

2 个答案: