如何通过AJAX调用API获取Google Photos相册照片并结合jQuery Fancybox使用

嘿，我明白你想通过Fancybox直接调用Google Photos共享相册的需求，但咱得先理清几个关键问题，再给你可行的解决方案：

为什么直接AJAX调用共享链接行不通？ #

• 跨域安全限制：浏览器的同源策略会阻止你直接通过AJAX请求Google Photos的页面，因为Google Photos没有设置允许外部域名访问的CORS头，这是浏览器的核心安全机制，没法绕开。
• 没有公开的AJAX接口：Google Photos的共享链接是给用户在浏览器里打开的网页，不是供程序调用的API端点，所以不存在直接通过这个链接获取照片数据的官方方式。

可行的两种解决方案 #

方案一：使用官方Google Photos API（推荐长期使用） #

这是最稳定的方式，不过需要一点前期配置：

1. 先去Google Cloud平台创建一个项目，启用「Google Photos Library API」，获取API密钥（如果是公开相册）或者OAuth 2.0凭据（如果是需要授权的私有相册）。
2. 通过API接口获取相册里的照片资源，再动态生成Fancybox需要的链接结构。

举个简单的实现思路代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

<!-- 用来存放生成的相册 -->
<div id="google-photos-gallery"></div>

<script>
// 替换成你自己的API密钥和相册ID
const apiKey = '你的Google API密钥';
const albumId = '你的相册ID'; // 可以从共享链接里提取，或者通过API的albums.list接口获取

// 发起API请求获取照片
$.ajax({
  url: `https://photoslibrary.googleapis.com/v1/mediaItems?albumId=${albumId}`,
  headers: {
    'X-Goog-Api-Key': apiKey
  },
  success: function(response) {
    const photos = response.mediaItems || [];
    let galleryHtml = '';

    photos.forEach(photo => {
      // 构建不同尺寸的图片URL，w1920是大图，w200是缩略图
      const largeImageUrl = `${photo.baseUrl}=w1920-h1080`;
      const thumbnailUrl = `${photo.baseUrl}=w200-h200`;

      // 生成Fancybox的相册链接
      galleryHtml += `
        <a data-fancybox="google-gallery" href="${largeImageUrl}" data-caption="${photo.description || photo.filename}">
          <img src="${thumbnailUrl}" alt="${photo.filename}" style="width: 100px; margin: 5px;" />
        </a>
      `;
    });

    // 把生成的相册插入页面
    $('#google-photos-gallery').html(galleryHtml);
  },
  error: function(err) {
    console.error('加载相册失败啦:', err);
  }
});
</script>

注意：如果是公开共享的相册，要确保相册设置为「公开可链接」，这样API才能访问到。如果是私有相册，还需要处理OAuth 2.0的授权流程，获取用户的访问令牌。

方案二：手动提取图片链接（临时应急方案） #

如果只是临时用用，不想折腾API，可以手动提取相册里的图片链接：

1. 打开你的Google Photos共享相册页面，右键查看页面源代码。
2. 搜索类似lh3.googleusercontent.com的链接，这些就是图片的实际地址。
3. 把这些链接整理成Fancybox的相册结构，比如：

<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

<a data-fancybox="temp-gallery" href="https://lh3.googleusercontent.com/你的图片链接1" data-caption="照片1">
  <img src="https://lh3.googleusercontent.com/你的图片链接1=w200-h200" alt="照片1" />
</a>
<a data-fancybox="temp-gallery" href="https://lh3.googleusercontent.com/你的图片链接2" data-caption="照片2" style="display:none;"></a>
<!-- 更多图片链接 -->

缺点：相册更新后得手动重新提取链接，而且Google可能随时更改图片URL格式，导致链接失效，不推荐长期使用。

Fancybox使用小提示 #

• 所有属于同一相册的链接，要加上相同的data-fancybox="xxx"属性，这样Fancybox会把它们归为一组，点击后可以左右切换。
• 用data-caption属性可以给每张图片添加说明文字，提升体验。

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