Widget für Picasa Bilder

Image via WikipediaIch wollte die mittels picasa veröffentlichten Bilder auf einer Seite und dann als App bei FaceBook veröffentlichen. Die Suche im Netz war nicht so einfach, aber dank BloggingTipps habe ich folgendes javascript gefunden.

< style>
#picasaStream img {border: 1px solid #000; margin: 0 5px 5px 0;}
< /style>
< script src="http://bloggerbuster-tools.googlecode.com/files/jquery.min.js" type="text/javascript">< /script>

< script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j.getJSON("http://picasaweb.google.com/data/feed/base/user/YOUR_USERNAME?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",
function(data){
var thumbCount = 9;
var smallThumb = 0;
var mediumThumb = 1;
var largeThumb = 2;
var picsCount = data.feed.entry.length - 1;
for (var i = picsCount; i > picsCount - thumbCount; i--) {
var pic = data.feed.entry[i];
$j("").attr("src", pic.media$group.media$thumbnail[smallThumb].url).attr("alt", pic.summary.$t).appendTo("#picasaStream");
}
});
});
< /script>

< div id="picasaStream">< /div>

Mittels der Variable thumbCount kann man die Anzahl der Bilder verändern. Das einbinden ging ganz schnell und das Ergebnis konnte sich auch sehen lassen.

Ein paar Tage und ein paar Bilder später kam dann aber die Ernüchterung. Die neuen Bilder wurden gar nicht angezeigt. Der RSS Feed der Bilder war auf jeden Fall mit den richtigen Bildern gefüllt. Ziemlich schnell fand ich dann heraus, das das erste Bild im Feed am Ende stand.

Warum sollten die ältesten Bilder ganz am Anfang stehen ? Und dadurch bei (standardmässig 100 Elementen im Stream [?]) immer ein Teil der neuesten Bilder fehlen!

Nun ja. Musste ich - als Nichtprogrammierer - also einfach die Reihenfolge tauschen. Mein Aufpassen in Braunesumpf muss sich aber doch gelohnt haben, denn nachdem ich mir die For-Schleife angeschaut habe, und ein bisschen dran rum spielte, hatte ich das gewünschte Ergebnis.

Die Zeile

var picsCount = data.feed.entry.length - 1;

wurde von mir nun gar nicht mehr benötigt.

Bei der Zeile

for (var i = picsCount; i > picsCount - thumbCount; i--)

habe ich das wie folgt geändert

for (var i = 1; i <= thumbCount; i++)

Und das Ergebnis kann man dann bei Facebook anschauen.