交换图像并显示图像缩放答案

【问题标题】：Swap image and show image zoom交换图像并显示图像缩放
【发布时间】：2011-10-31 10:20:01
【问题描述】：

我有一个使用 BigCommerce 的网站，该网站在产品页面上具有显示一些缩略图的功能。当用户单击缩略图时，它会显示该图像的一些描述，并且还应该将左侧的主图像交换为所选缩略图的大版本。

脚本正在正确地执行描述的显示/隐藏部分，但没有交换主图像。我想知道是否有人可以帮助解决这个问题？联系了 BigCommerce，但他们说这是一个特定于模板的问题，他们无能为力。

在检查网络检查器时，它说存在未捕获的类型错误，并且 rel 标记的“大图像”属性缺失。我尝试重新添加它，但它没有任何效果。

谢谢。

【问题讨论】：

您能发布您用于更改的 JS 代码/函数吗？不喜欢在您的网站上搜索它。

标签： javascript jquery

【解决方案1】：

你有一个函数showProductThumbImage()，它需要两个参数，但你只传递了一个，例如：

<a onclick="showProductThumbImage(2)" href="#"><img ... /></a>

第二个参数应该是对元素的引用...在其他地方传递this，所以大概你应该在这里做同样的事情。该函数期望传递的元素有一个 rel 属性，其中包含一个 JSON 字符串作为它的值。页面上隐藏的元素具有看起来正确的rel 属性：

<a href="javascript:void(0);"
    rel='{"gallery": "prodImage", "smallimage": "http://www.kriega.com/product_images/m/322/HY3home__49494_std.jpg", "largeimage": "http://www.kriega.com/product_images/h/328/HY3home__71324_zoom.jpg"}'
><img ... /></a>

您需要将上面包含JSON的rel属性获取到调用showProductThumbImage()的链接中，并将this作为第二个参数传递：

<a onclick="showProductThumbImage(2, this)" href="#"
    rel='{"gallery": "prodImage", "smallimage": "http://www.kriega.com/product_images/m/322/HY3home__49494_std.jpg", "largeimage": "http://www.kriega.com/product_images/h/328/HY3home__71324_zoom.jpg"}'
><img ... /></a>

【讨论】：