如何使用Cloudinary实现亚马逊同款产品图库？是否有可用代码片段？

Cloudinary 官方已封装好完整的产品图库组件，原生支持亚马逊产品图库的全部标准交互：左侧缩略图轮播、主图悬停局部放大、点击全屏预览、商品变体图片联动切换等，可直接复用以下代码实现需求。

前置准备 #

• 注册Cloudinary账号，将所有产品图片上传至Cloudinary媒体库
• 记录你的Cloudinary账号cloudName，以及对应产品的图片资源标签或单图publicId

安装方式 #

原生HTML/静态页面（CDN引入） #

在页面头部引入组件资源：

<script src="https://product-gallery.cloudinary.com/all/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://product-gallery.cloudinary.com/all/latest/index.css">

前端框架项目（NPM安装） #

执行安装命令：

npm install @cloudinary/html

在项目代码中引入组件即可适配React/Vue/Angular等框架。

可直接运行的完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>亚马逊式产品图库</title>
  <script src="https://product-gallery.cloudinary.com/all/latest/index.umd.js"></script>
  <link rel="stylesheet" href="https://product-gallery.cloudinary.com/all/latest/index.css">
</head>
<body>
  <!-- 图库挂载容器 -->
  <div id="product-gallery" style="width: 600px; margin: 30px auto;"></div>

  <script>
    const productGallery = cloudinary.galleryWidget({
      // 替换为你自己的Cloudinary cloudName
      cloudName: "替换为你的cloudName",
      container: "#product-gallery",
      // 替换为你自己的产品图片资源
      mediaAssets: [
        // 可按标签批量导入同产品的所有图片
        { tag: "你的产品图片标签" },
        // 也可单独指定单张图片：{ publicId: "图片1的publicId" }, { publicId: "图片2的publicId" }
      ],
      // 亚马逊同款效果核心配置
      carouselPosition: "left", // 缩略图居左展示
      zoom: {
        trigger: "hover", // 悬停触发放大
        maxZoom: 3, // 最大放大倍数可自行调整
      },
      showFullscreenButton: true, // 显示全屏预览按钮
      carouselStyles: {
        spacing: 8, // 缩略图间距
      },
      // 若有商品变体，添加以下配置实现切换时同步更新图库
      product: {
        id: "你的产品ID",
        variants: [
          {
            "color": "红色",
            media: [{ publicId: "红色款产品图publicId" }]
          },
          {
            "color": "蓝色",
            media: [{ publicId: "蓝色款产品图publicId" }]
          }
        ]
      }
    });
    // 渲染图库
    productGallery.render();
  </script>
</body>
</html>

常用配置调整 #

• 缩略图位置：修改carouselPosition参数，可选值为left/right/top/bottom
• 放大触发方式：修改zoom.trigger为click即可实现点击才触发放大
• 隐藏功能按钮：将showZoomButton/showFullscreenButton设为false即可隐藏对应按钮
• 缩略图数量：修改carouselItemsPerPage可调整每屏显示的缩略图个数

内容的提问来源于stack exchange，提问作者user15775524