2013-04-13 2 views
0

Я использую этот шаблон для личного проекта.
https://github.com/blueimp/Bootstrap-Image-Gallery
и есть этот код здесь, который получает фотографии от flickr. Этот код использует метод flickr.interestingness.getList, который принимает теги в качестве аргумента, как показано здесь. http://www.flickr.com/services/api/flickr.interestingness.getList.html
Я хочу передать в тегах в качестве аргумента, но я не могу понять синтаксис для этого в ajax или w/e, формат, используемый в этом коде.Bootstrap gallery template flickr images

// 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); 
     }); 
+0

Любая удача? Я также пытаюсь использовать blueimp с flickr. – vpoola88

+0

hmm Я перестал работать над этим некоторое время назад, но я действительно получил что-то работающее. Думаю, – Lemonio

+0

что-то вроде этого http://matthewpiatetsky.com/PhotoStream/js/main.js – Lemonio

ответ

0

Это кажется лучше проекта:

http://petejank.github.io/js-flickr-gallery/ 
-1
/* 
* 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'}); 

     });