如何使用Cloudinary Gallery Widget加载本地资源而非云端图片？

当然有办法搞定！Cloudinary的galleryWidget本质是绑定他们云端服务的组件，没法直接让它读取本地资源，不过我们可以换两种思路来实现本地资源的画廊效果：

方案1：用开源本地画廊组件替代（推荐） #

这类组件专门支持本地文件，功能和Cloudinary的画廊类似，还能自定义样式。比如LightGallery或者Fancybox都是不错的选择，这里以LightGallery为例给你演示：

步骤1：引入组件依赖 #

你可以把组件的CSS和JS文件下载到本地（或者用CDN，不过既然要本地资源，建议下载到项目目录），然后引入：

<link rel="stylesheet" href="/path/to/lightgallery.min.css">
<script src="/path/to/lightgallery.min.js"></script>
<!-- 如果需要视频/360功能，还要引入对应插件 -->
<script src="/path/to/lg-video.min.js"></script>
<script src="/path/to/lg-zoom.min.js"></script>

步骤2：编写本地资源画廊的HTML结构 #

把你的本地图片、视频、360素材路径写进去：

<div id="my-gallery" style="max-width:80%;margin:auto">
  <!-- 本地图片 -->
  <a href="/local-images/car-1.jpg" data-sub-html="<h4>电动车型1</h4>">
    <img src="/local-images/car-1-thumb.jpg" alt="电动车型1缩略图">
  </a>
  <!-- 本地视频 -->
  <a href="/local-videos/car-demo.mp4" data-video="true" data-sub-html="<h4>车型演示视频</h4>">
    <img src="/local-images/car-video-thumb.jpg" alt="视频缩略图">
  </a>
  <!-- 360度素材（可以用序列图模拟，或者用支持360的插件） -->
  <a href="/local-360/car-spin-01.jpg" data-poster="/local-images/car-360-thumb.jpg" data-sub-html="<h4>360度车型展示</h4>" data-lg-zoom="true">
    <img src="/local-images/car-360-thumb.jpg" alt="360展示缩略图">
  </a>
</div>

步骤3：初始化组件 #

<script type="text/javascript">
  lightGallery(document.getElementById('my-gallery'), {
    plugins: [lgVideo, lgZoom],
    speed: 500,
    // 可以根据需求加更多配置
  });
</script>

方案2：手动实现基础画廊（无第三方依赖） #

如果不想引入额外库，自己写个简单的版本也不难，核心是处理缩略图点击、大图/视频展示的逻辑：

示例代码 #

<!-- 缩略图容器 -->
<div id="my-gallery" style="max-width:80%;margin:auto;display:flex;gap:10px;flex-wrap:wrap">
  <div class="gallery-item" data-type="image" data-src="/local-images/car-1.jpg">
    <img src="/local-images/car-1-thumb.jpg" alt="车型1" style="width:150px;height:100px;object-fit:cover;cursor:pointer">
  </div>
  <div class="gallery-item" data-type="video" data-src="/local-videos/car-demo.mp4">
    <img src="/local-images/car-video-thumb.jpg" alt="演示视频" style="width:150px;height:100px;object-fit:cover;cursor:pointer">
  </div>
</div>

<!-- 模态框用于展示大图/视频 -->
<div id="gallery-modal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999">
  <span id="close-modal" style="position:absolute;top:20px;right:30px;color:white;font-size:30px;cursor:pointer">&times;</span>
  <div id="modal-content" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90%;max-height:90%"></div>
</div>

<script type="text/javascript">
  const modal = document.getElementById('gallery-modal');
  const modalContent = document.getElementById('modal-content');
  const closeBtn = document.getElementById('close-modal');
  const galleryItems = document.querySelectorAll('.gallery-item');

  // 点击缩略图展示内容
  galleryItems.forEach(item => {
    item.addEventListener('click', () => {
      const type = item.dataset.type;
      const src = item.dataset.src;
      modalContent.innerHTML = '';
      
      if (type === 'image') {
        const img = document.createElement('img');
        img.src = src;
        img.style.maxWidth = '100%';
        img.style.maxHeight = '100%';
        modalContent.appendChild(img);
      } else if (type === 'video') {
        const video = document.createElement('video');
        video.src = src;
        video.controls = true;
        video.style.maxWidth = '100%';
        video.style.maxHeight = '100%';
        modalContent.appendChild(video);
      }
      
      modal.style.display = 'block';
    });
  });

  // 关闭模态框
  closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
    // 视频要暂停
    const video = modalContent.querySelector('video');
    if (video) video.pause();
  });

  // 点击模态框背景关闭
  window.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.style.display = 'none';
      const video = modalContent.querySelector('video');
      if (video) video.pause();
    }
  });
</script>

补充说明 #

• 对于360度素材，手动实现的话可以用序列图切换的方式（比如加载一组角度图片，通过JS控制切换），不过相对复杂一些，建议用方案1的插件来处理更省心。
• 不管用哪种方案，记得把本地资源的路径写对，确保文件和HTML页面的相对路径正确。

内容的提问来源于stack exchange，提问作者Umut Eskitoğlu