Question

我正在将此模板用于个人项目 https://github.com/blueimp/Bootstrap-Image-Gallery
这里有这个代码从flickr获取照片。此代码使用方法flickr.interestingness.getList，它将标记作为参数，如此处所示。 http://www.flickr.com/services/api/flickr.interestingness.getList.html
我想传递标签作为参数，但我无法弄清楚在ajax中执行此操作的语法，或者w / e在此代码中使用的格式是。

    // Load images via flickr for demonstration purposes:
    $.ajax({
        url: 'http://api.flickr.com/services/rest/',
        data: {
            format: 'json',
            method: 'flickr.interestingness.getList',

            api_key: 'API_KEY_abc123'
        },
        dataType: 'jsonp',
        jsonp: 'jsoncallback'
    }).done(function (data) {
        var gallery = $('#gallery'),
            url;
        $.each(data.photos.photo, function (index, photo) {
            url = 'http://farm' + photo.farm + '.static.flickr.com/' +
                photo.server + '/' + photo.id + '_' + photo.secret;
            $('<a data-gallery="gallery"/>')
                .append($('<img>').prop('src', url + '_s.jpg'))
                .prop('href', url + '_b.jpg')
                .prop('title', photo.title)
                .appendTo(gallery);
        });

Answer 1

这似乎是一个更好的项目：

http://petejank.github.io/js-flickr-gallery/

Answer 2

/*
 * Bootstrap Image Gallery JS Demo 3.0.0 
 * https://github.com/blueimp/Bootstrap-Image-Gallery
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 * Plugin was modified by ravindu
 */
(function( $ ) {
            $.fn.flickr = function(options) {
                var url = 'http://api.flickr.com/services/rest/?jsoncallback=?';

                var settings = $.extend( {
                    'api_key': 'YOUR API',          
                }, options);

                function view_image(event) {
                    var target = $(event.target);

                    if(target.is('img')) {
                        var url = target.attr('data-url');
                        var cache = new Image();
                        cache.src = url;
                        var gallery = target.parents('.flickr-gallery:first').children('div.viewport');
                        var info = gallery.children('div.image-info');
                        var image = gallery.children('img');
                        image.fadeOut('slow', function () {
                            image.attr('src', url);
                            image.fadeIn('slow');
                            info.html(target.attr('data-title') + '<br />' + target.attr('data-tags'));
                        });
                    }
                }

                return this.each(function() {    

                    var gallery = $(this);
                    gallery.addClass('flickr-gallery');
                    gallery.append('<h2></h2><h3></h3><div class="viewport"></div><div class="browser"><ul></ul></div><div class="clear"></div>');

                    $.getJSON(url, {
                        method: 'flickr.photosets.getInfo',
                        api_key: settings.api_key,                      
                        photoset_id: settings.photoset_id,
                        format: 'json'
                    }).success(function(state) {
                        gallery.children('h3').html(state.photoset.description._content);
                        gallery.find('.loader').addClass('activate');

                        $.getJSON(url, {
                            method: 'flickr.photosets.getPhotos',
                            api_key: settings.api_key,
                            media: 'photos',
                            photoset_id: settings.photoset_id,
                            format: 'json',
                            extras: 'url_sq,url_m,url_b,date_taken,tags'
                        }).success(function(state) {

                            $('.loader').removeClass('activate');

                            var list = gallery.find('ul:first');
                            list.html('');
                            list.on('click', view_image);

                            $.each(state.photoset.photo, function(index, photo){

                                  baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
                photo.server + '/' + photo.id + '_' + photo.secret;

                                list.append('<a href="' + this.url_m + '" title="' + this.title + '" data-gallery="" > <img src="' + this.url_sq + '" title="' + this.title + '" ' +
                                    'data-title="' + this.title + '" ' +
                                    'data-url="' + this.url_m + '" ' +
                                    ( this.date_taken ? 'data-date="' + this.date_taken + '" ' : '' ) +
                                    'data-tags="' + this.tags + '" ' +
                                    '/></a>');
                            });

                        }).fail(function(state) { 
                            alert("Unable to retrieve photo set"); 
                        });
                    }).fail(function(state) { 
                        alert("Unable to retrieve photo set information"); 
                    });
                });

            };
        })( jQuery );
        $(document).on('ready', function(){

            $('#photos-1').flickr({ photoset_id:'72157640241840746'});
            $('#photos-2').flickr({ photoset_id:'72157640251299195'});
            $('#photos-3').flickr({ photoset_id:'72157640241840746'});
            $('#photos-4').flickr({ photoset_id:'72157640251299195'});
            $('#photos-5').flickr({ photoset_id:'72157640241840746'});

        });

Bootstrap画廊模板flickr图像

2 个答案: