在Magento中切换带有缩略图的基本图像 [英] Switching a Base image with a thumbnail in Magento

问题描述

在定制的产品查看页面上，我从基础图像(较大的图像)和缩略图列表开始工作，这些缩略图是与媒体库中与该产品相关联的其他图像(它们只是普通图像，而不是已定义的缩略图)，我要执行的任务是获取它，以便单击缩略图时，它将更改上方的基本图像

On a custom made product view page i'm working off from there is the base image (the large one) and a list of thumbnails which are other images associated with the product in the media gallery (they are just normal images and not the defined thumbnail), what i've been tasked to to is get it so that when you click on a thumbnail it'll change the base image above

我已经可以工作了，但是我遇到了一个问题，当我更改图像时，它更改为非常像素化的图像，原始图像最初是737x578，所以我知道如果图像较小，它将被拉伸，但是缩略图来源的图片与原始基本图片的尺寸大致相同，只是它们的尺寸已调整为48x48

i've got that working however i have a problem, when i change the image the image it changes to is very pixelated one, the base image is 737x578 originally so i understand that if the image is smaller it'll be stretched, however the images the thumbnails came from are roughly the same size as the original base image, it's just that they have been re-sized to be 48x48

在Firefox中查看查看图像信息"中的信息显示，图像的src来自magento缓存(media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/)，而不是原始图像我在媒体文件夹中拥有的文件

looking at information in "view image info" in Firefox shows that the image's src is coming from the magento cache (media/catalog/product/cache/1/thumbnail/48x/9df78eab33525d08d6e5fb8d27136e95/images/) and not from the original file i have in the media folder

这样创建基本图像

<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

and this is the javascript i'm using to switch the images

    jQuery(document).ready(function()
    {
        jQuery("#image-list li img").click(function()
        {
            jQuery("#main-image img").attr("src", jQuery(this).attr("src"));
        });
    });

要用缩略图使用的原始图像替换基本图像，我需要对JavaScript进行什么更改，显然仅更改标记中的src属性是不够的

what change would i need to make to my javascript in order to replace the base image with the original images used by the thumbnails, obviously just changing the src attribute in the tag isn't enough

推荐答案

单击缩略图时，您的jQuery将主图像的src设置为缩略图src(即48x48).单击缩略图应将主图像设置为缩略图的大尺寸.

When you click the thumbnail image, your jQuery is setting the src of the main image to the thumbnail image src (which is 48x48). A click on the thumbnail should set the main image to the large size of the thumbnail image.

因此，您需要一种从缩略图元素中引用大图像src的方法.您可以在缩略图元素内创建一个名为data-main-image-src之类的属性，以便稍后在jQuery中进行引用:

So you need a way to reference the large image src from within the thumbnail image element. You can create an attribute called something like data-main-image-src inside the thumbnail image element so that you can reference that later in 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更改为较大的图像:

Then you would modify your jQuery like this so that you change the main image src to be the larger image:

jQuery(document).ready(function()
{
    jQuery("#image-list li img").click(function()
    {
        jQuery("#main-image img").attr("src", jQuery(this).attr("data-main-image-src"));
    });
});

这篇关于在Magento中切换带有缩略图的基本图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！