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