Question

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

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

然而它并不适合我。两个问题：

当我用我的API替换API时，原始的演示图像仍然被加载！但是为了确保实际使用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);
    });
});

Answer 1

您也可以使用本地图像而不是Flickr。查找＆＃34;示例图像列表的容器＆＃34;并将以下内容粘贴到源文件中。

    <!-- 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（假设它是公开的），你很高兴去！[/ p>

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

是的，我知道这不是我的问题的确切答案，而是一个其他人可能觉得有价值的迂回黑客。

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。给你这样的东西：

error

Answer 5

Cris'解决方案是正确的。只是改变： $ .each（result.photos.photo，function（index，photo）至 $ .each（result.photoset.photo，function（index，photo）

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

5 个答案: