引导图像库，无法加载自己的 Flickr 图像

Posted 2023-03-15

【中文标题】引导图像库，无法加载自己的 Flickr 图像

【英文标题】：Bootstrap image gallery, can't load own Flickr images

【发布时间】：2014-02-05 01:14:13

【问题描述】：

我刚刚下载了Bootstrap Image Gallery，但很难从 Flickr 加载我的图像。在 demo.js 文件中，有一个用于从 Flickr 加载图像的 AJAX 调用。

说实话，我对 JS 或 AJAX 调用并不熟悉，但在查看代码时，它似乎就像替换 API 密钥一样简单。 （基本 URL 公式是从 Flickr 已经根据它们在服务器中存储数据的位置定义的照片规范中提取的。）

但它对我不起作用。两个问题：

当我将 API_key 替换为我的时，原始演示图像仍在加载中！但是为了确保 API_key 实际被使用，如果我用任何内容或随机密钥替换它，图像不会加载。 当我用flickr.photosets.getPhotos 替换方法时（并在API 密钥后添加必要的photoset_id），没有图像出现。事实上，尽管我已经尝试了多种方法来调用每个Flickr API docs 的照片，但只有原始的flickr.interestingness.getList 有效

对此有什么想法吗？我要做的就是使用我的 API_Key 调用我的照片，然后使用 flickr.photosets.getPhotos 方法（返回一组特定照片）。

相关代码如下

// Load demo images from flickr:
$.ajax(
    url: (window.location.protocol === 'https:' ?
            'https://secure' : 'http://api') +
            '.flickr.com/services/rest/',
    data: 
        format: 'json',
        method: 'flickr.interestingness.getList',
        api_key: '7617adae70159d09ba78cfec73c13be3'
    ,
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
).done(function (result) 
    var linksContainer = $('#links'),
        baseUrl;

    // Add the demo images as links with thumbnails to the page:
    $.each(result.photos.photo, function (index, photo) 
        baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<a/>')
            .append($('<img>').prop('src', baseUrl + '_s.jpg'))
            .prop('href', baseUrl + '_b.jpg')
            .prop('title', photo.title)
            .attr('data-gallery', '')
            .appendTo(linksContainer);
    );
);

【问题讨论】：

将console.log(result) 放在done 函数的开头，并检查输出到浏览器控制台的内容。当出现问题时，这些 API 方法会返回错误，您可以通过简短查看 API 文档（我假设您没有打扰？）来发现。请开始阅读文档，而不是仅仅通过反复试验（甚至不检查可能的错误）。

@CBroe 是的，我确实阅读了所有文档，但如前所述，我对 Ajax 或 JS 不熟悉，除非我对它大加掩饰，否则文档没有提到 Ajax Flickr 调用一点也不。同样，我并不是说页面没有加载，只是没有加载正确的图像，调用工作正常并且没有抛出错误。在我尝试输入 console.log(result) 之后确实是这种情况。你还有什么我可以尝试的想法吗？

形成文档，在我看来，flickr.interestingness.getList 不应该提供特定于查看用户/应用程序的照片，而是 Flickr 通常认为的“有趣的照片”——这将当然意味着你得到相同的组照片。 flickr.photosets.getPhotos 的控制台输出显示什么？

输出看起来是一样的，这段代码所在的 demo.js 文件没有抛出任何错误

【参考方案1】：

您也可以使用本地图片代替 Flickr。查找“示例图像列表的容器”并将以下内容粘贴到源文件中。

    <!-- The container for the list of example images -->
    <div id="links"><div id="links">
    <a href="images/banana.jpg" title="Sample Image 1" data-gallery>
        <img src="images/thumbnails/banana.jpg" >
    </a>
    <a href="images/apple.jpg" title="Sample Image 2" data-gallery>
        <img src="images/thumbnails/apple.jpg" >
    </a>
    <a href="images/orange.jpg" title="Sample Image 3" data-gallery>
        <img src="images/thumbnails/orange.jpg" >
    </a>
</div>

删除以下内容：

    // Load demo images from flickr:
$.ajax(
    data: 
        format: 'json',
        method: 'flickr.interestingness.getList',
        api_key: '7617adae70159d09ba78cfec73c13be3'
    ,
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
).done(function (result) 
    var linksContainer = $('#links'),
        baseUrl;

【参考方案2】：

最终发生的事情是我永远无法弄清楚这一点，在查看了 Bootstrap Image Gallery、Responsive Image Gallery、Touch Touch、FancyBox、SimpleViewer 之后，我选择了Galleria。不是说其他​​的不好，而是从初学者到前端的角度来看，0 的 javascript 经验，没有什么比 Galleria 更容易设置的了。

他们会准确地告诉您所有内容的去向，以达到他们谈论和标记的简单程度。对于更高级的用户，您可以直接跳过。

更不用说，Galleria 的文档非常完善，手动为其主题添加简单的自定义项非常直观（字面意思是，如果我能做到，任何人都可以）。而且他们的原生 Flickr API 非常简单……没有 API 密钥，只有 photoset_id（假设它是公开的），你就可以开始了！

我是这样的粉丝......

是的，我意识到这不是对我的问题的确切答案，而是其他人可能认为值得的迂回黑客攻击。

【参考方案3】：

这对我有用：注释掉“use strict”，将 api_key 和 user_id 替换为您的值

$(function () 
// 'use strict';

// Load demo images from flickr:
$.ajax(
    url: 'https://api.flickr.com/services/rest/',
    data: 
        format: 'json',
        method: 'flickr.people.getPublicPhotos',
        api_key: 'ef8882888fcdd8885769c8881d888c6d',
        user_id: '98888889@N08'
    ,
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
).done(function (result) 

【参考方案4】：

以下是我在自己的 flickr 帐户中使用现有专辑的方法。 使用方法：'flickr.photosets.getPhotos' 并循环遍历 result.photoset.photo。给你这样的东西：

$(function () 
'use strict';
$.ajax(
    url: 'https://api.flickr.com/services/rest/',
    data: 
        format: 'json',
        method: 'flickr.photosets.getPhotos',
        photoset_id: '<ALBUM ID>',
        api_key: '<API KEY>'
    ,
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
).done(function (result) 
    var linksContainer = $('#links'),
        baseUrl;
    $.each(result.photoset.photo, function (index, photo) 
        baseUrl = 'https://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<a/>')
            .append($('<img>').prop('src', baseUrl + '_q.jpg'))
            .prop('href', baseUrl + '_b.jpg')
            .prop('title', photo.title)
            .attr('data-gallery', '')
            .appendTo(linksContainer);
    );
);

【参考方案5】：

Cris 的解决方案是正确的。 只是改变： $.each(result.photos.photo, function (index, photo) 到 $.each(result.photoset.photo, function (index, photo)

【讨论】：

欢迎来到 Stack Overflow！这实际上是评论，而不是答案。多一点代表，you will be able to post comments.