Question

我一直在寻找一种在网站上创建图库的方法，其中包含我在谷歌硬盘中的文件夹中的图片。我在这里分享的内容：https://drive.google.com/drive/u/0/folders/0Bwx-OwnNeIvwRldSVlU5SGN0dGs 里面是一个简单的HTML，一个画廊文件夹，里面有怪物卡车和可爱动物的图片。目标是创建一个人们可以上传图像的画廊;怪物卡车和可爱的动物。

我一直在寻找实现这一目标的各种方法，这是我迄今为止所发现的：

简而言之，我想要实现的是在我的G-Drive中的公共共享文件夹中获取图像的ID。然后使用这些id通过HTML在HTML中创建一个库。

我的HTML现在是什么样的：

的index.html

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">
<!-- all divs will append here -->
</div>

我在Drive SDK上的研究内容：

我一直在使用“试试”部分来弄清楚我需要做什么。 https://developers.google.com/drive/v2/reference/children/list#examples

请求结果：获取https://www.googleapis.com/drive/v2/files/0Bwx-OwnNeIvwRG5rNzZ6OURSNEk/children?fields=items%2Fid

回复结果：

200 OK
- SHOW HEADERS -
{
"items": [
{
 "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
},
{
 "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
},
{
 "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
},
{
 "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
},
{
 "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
},
{
 "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
}]}

我希望脚本能够做什么：

的script.js

var imageIds = <!-- ids from the the response --> ;
var x = imageIds.length;
for (var i = 0; i < x; i++) {
 <!-- create a <div> --> 
}
//See below*

创建div：在for循环中，它将在该div中创建一个<div>，其中包含特定的"class"和<img>，其中包含{{ 1}}“IMAGE-ID”来自“Response”。然后，"src="http://drive.google.com/uc?export=view&id=IMAGE-ID"将附加到index.html中的<div>。

我希望最终HTML看起来像：

index.html：

<div id="gallery">

我现在不确定的是，如何从G-Drive文件夹中获取图像ID需要进行身份验证。这可以通过Google云端硬盘本身及其托管链接进行托管，也可以通过Google Apps脚本创建，以及在那里提供HTML的功能，这样可以简化身份验证，因为您可以直接从驱动器获取所有内容< / em>的。

我不明白为什么这里找不到，这不涉及付款。如果每个人都有机会从G-Drive文件夹中的图像创建图像库，那就太好了。

真的很想得到你的帮助。非常感谢。

Answer 1

首先，关于代码本身，它会是这样的：

＆＃13;

document.addEventListener('DOMContentLoaded', function() {
  var response = {
    "items": [{
      "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
    }, {
      "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
    }, {
      "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
    }, {
      "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
    }, {
      "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
    }, {
      "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
    }]
  };

  var imageIds = response.items.map(function(item) {
    return '<div class="brick"><img src="http://drive.google.com/uc?export=view&id=' + item.id + '"></div>';
  });

  document.getElementById('gallery').insertAdjacentHTML('afterbegin', imageIds.join(''));
});

＆＃13;

<div id="gallery"></div>

＆＃13;

关于授权，take a look at their documentation。

图片库托管在Google云端硬盘中

1 个答案: