Embed Picasa Thumbnails for Each Album on Weebly,Blogger, Word Press etc (with embedded link for each image)

picasa_script_album_with_link.pdf
File Size:	100 kb
File Type:	pdf

Download File

---

I discovered an amazing way (shout out to Amanda Fanzani and the helpful users at blogging tips) to embed thumbnails of your whole album. You can even link back to your picasa lightbox to see each image in larger quality. With some googling and tweaking, it works perfectly! This is great if your albums are growing and a picasa embedded slideshow isn't good enough. It can be quite cumbersome to scroll all the way through and, let's face it, weebly's uploader is quite limited. Use the html code below to embed thumbnails on weebly, blogger, or wordpress. You can also download the pdf version at the top of the post.


Remeber to replace the YOUR USER NAME with your picasa user name (mine is andrew.joanisse). The thumbnails are set to 100, but you can change it to whatever by replacing the 100 in this section:

var thumbCount = 100;

You change the album it embeds by changing the link highlighted in red in the section here: (note: to find the link to your album, go to the picasa album of your choice, and click on RSS on the right side. Copy the link in the browser and delete everything after the question mark (?).

$j.getJSON("https://picasaweb.google.com/data/feed/base/user/andrew.joanisse/albumid/5664661680757723377?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",

  Here is the code below:



<style>
#picasaStream img {border: 1px solid #000; margin: 0 5px 5px 0;}
</style>
<script src="http://bloggerbuster-tools.googlecode.com/files/jquery.min.js" ></script>
<script >
$j = jQuery.noConflict();
$j(document).ready(function(){
$j.getJSON("https://picasaweb.google.com/data/feed/base/user/andrew.joanisse/albumid/5664661680757723377?kind=photo&thumbsize=72c&access=public&alt=json&callback=?",
function(data){
var thumbCount = 100;
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("<img/>").attr("src", pic.media$group.media$thumbnail[smallThumb].url).attr("alt", pic.summary.$t).appendTo("#picasaStream").wrap("<a href=" + pic.link[1].href + ">");
}
});
});
</script>
<div id="picasaStream"></div>