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

Question

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

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

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

1. 当我将 API_key 替换为我的时，原始演示图像仍在加载中！但是为了确保 API_key 实际被使用，如果我用任何内容或随机密钥替换它，图像不会加载。
2. 当我用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);
    });
});

Answer 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" alt="Banana">
    </a>
    <a href="images/apple.jpg" title="Sample Image 2" data-gallery>
        <img src="images/thumbnails/apple.jpg" alt="Apple">
    </a>
    <a href="images/orange.jpg" title="Sample Image 3" data-gallery>
        <img src="images/thumbnails/orange.jpg" alt="Orange">
    </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;

Answer 2

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

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

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

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

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

Answer 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) {

Answer 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);
    });
});

Answer 5

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