Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Picasa and Flickr albums using jquery

By: digitaltoast on Jun 15th, 2011  |  syntax: jQuery  |  size: 3.91 KB  |  hits: 407  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. // uses http://www.gethifi.com/blog/a-jquery-flickr-feed-plugin and
  2. // http://plugins.jquery.com/project/EmbedPicasaGallery
  3. // plus jquery and slimbox etc - see docs for each script above
  4. // I'm using http://headjs.com/ here
  5. // for flickr:
  6. // <ul class="thumbs" name="http://www.flickr.com/photos/username/tags/tagname/"></ul>
  7. // for picasa: <div class="PicasaAlbum">http://picasaweb.google.com/username/albumname</div>
  8. // all picasa albums: <div class="PicasaAlbum">http://picasaweb.google.com/username</div>
  9. // demo using bbcode http://www.reading-forum.co.uk/forum/viewtopic.php?f=20&t=6536
  10.  
  11.  
  12. <script>
  13.     head.ready(function() {
  14.         var APIkey = "xxxxxxFLICKR_API_KEYxxxxxx";
  15.  
  16.         // flickr
  17.         $("ul[class=thumbs]").each(function(index) {
  18.             //var thisID = $(this).text();
  19.             var thisID = $(this).attr("name");
  20.             var flickrUser = thisID.split("/")[4];
  21.             var tag = thisID.split("/")[6];
  22.             $(this).attr("id", flickrUser + tag + index);
  23.             $.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?", {
  24.                 method: "flickr.urls.lookupUser",
  25.                 url: thisID,
  26.                 format: "json",
  27.                 api_key: APIkey
  28.             }, function(data) {
  29.  
  30.                 $("#" + flickrUser + tag + index).jflickrfeed({
  31.                     limit: 30,
  32.                     qstrings: {
  33.                         id: data.user.id,
  34.                         tags: tag
  35.                     },
  36.                     itemTemplate: '<li>' + '<a rel="colorbox" href="{{image}}" title="{{title}}">' + '<img src="{{image_s}}" alt="{{title}}" />' + '</a>' + '</li>'
  37.                 }, function(data) {
  38.                     $("#" + flickrUser + tag + index + " a").colorbox();
  39.                 });
  40.             });
  41.         });
  42.  
  43.         //picasa
  44.         $("div[class=PicasaAlbum]").each(function(index) {
  45.             var thisID = $(this).text();
  46.             var picasaUser = thisID.split("/")[3];
  47.             var picasaAlbum = thisID.split("/")[4];
  48.  
  49.             if (picasaAlbum) {
  50.                 $(this).attr("id", picasaUser + picasaAlbum + index);
  51.                 $.getJSON('http://picasaweb.google.com/data/feed/api/user/' + picasaUser + '?kind=album&access=visible&' + 'alt=json&thumbsize=144c&callback=?', function(data) {
  52.                     for (var i = 0; i < data.feed.entry.length; ++i) {
  53.                         if (data.feed.entry[i].gphoto$name.$t == picasaAlbum) {
  54.                             var picasaAlbumID = data.feed.entry[i].gphoto$id.$t;
  55.                             //alert(picasaAlbumID);
  56.                             $("#" + picasaUser + picasaAlbum + index).EmbedPicasaGallery(picasaUser, {
  57.                                 albumid: picasaAlbumID,
  58.                                 size: 144,
  59.                                 // thumb size (32,48,64,72,144,160))
  60.                                 loading_animation: '/forum/jquery.EmbedPicasaGallery/css/loading.gif',
  61.                                 msg_more: 'show<br/>more',
  62.                                 msg_loading_list: 'Loading photos from PicasaWeb',
  63.                                 show_more: 6,
  64.                                 msg_back: 'Back'
  65.                             });
  66.                         }
  67.                     }
  68.                 });
  69.  
  70.             } else {
  71.                 $(this).attr("id", picasaUser + index);
  72.                 $("#" + picasaUser + index).EmbedPicasaGallery(picasaUser, {
  73.                     matcher: /./,
  74.                     size: 144,
  75.                     // thumb size (32,48,64,72,144,160))
  76.                     loading_animation: '/forum/jquery.EmbedPicasaGallery/css/loading.gif',
  77.                     msg_more: 'show<br/>more',
  78.                     msg_loading_list: 'Loading album list from PicasaWeb',
  79.                     show_more: 7,
  80.                     msg_back: 'Back'
  81.                 });
  82.             }
  83.         });
  84.     });
  85. </script>
create a new version of this paste RAW Paste Data