我正在创建一个包含许多产品的网站,每个产品我最多可以有 10 张图片。
我需要做的是:
1:图像 #1 - 已加载(大)
2:为每个上传的图像创建缩略图
3:将缩略图放在大图像下
4:当用户单击缩略图时,它会将大图像替换为被选中的那个
我正在创建一个包含许多产品的网站,每个产品我最多可以有 10 张图片。
我需要做的是:
1:图像 #1 - 已加载(大)
2:为每个上传的图像创建缩略图
3:将缩略图放在大图像下
4:当用户单击缩略图时,它会将大图像替换为被选中的那个
要在不刷新页面的情况下动态更改图像将需要一些 javascript。我建议使用jQuery,因为它是准标准的,随 Drupal 6 一起提供并且非常易于使用。
在每个缩略图上,您都可以添加一个 onClick,即使它会更新大图像的 src 属性。浏览器将负责为您拉入新的大图像。
以下基于 jQuery 的函数将更新一个 id 为 "large" 的 img 标签,以使用 newPath 替换其当前的 src 值:
function updateLarge( newPath ) {
$("#large").attr("src", newPath);
}
此外,如果您正在创建一个电子商务网站,您应该考虑使用类似Ubercart的东西。根据 FlorianH 的解决方案,您可以使用 CCK 向 Ubercart 产品添加字段,但您还可以免费获得购物车和结帐等内容。