22lip jQuery Picbox gallery using Picasa JSON feed

I’m running small website for my friend and there always be an issue with updating the gallery, because I had to manually upload photos and then change JavaScript code as well.

Fortunately he’s using Google Picasa Web Albums which we’ll use as a JSON feed and show on our site using JavaScript only – specially jQuery Picbox gallery.

CHECKOUT DEMO »»

Let’s consider example gallery at Picasa:
http://picasaweb.google.com/114870412886981821775/FIFAWORLDCUPGIRL2010

At the right there is RSS link which looks like this:
http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=rss&kind=photo&hl=pl

Due to Picasa Web Albums query parameters reference we change alt param to json and add imgmax and callback in which we pass the name of the function to invoke after the feed is loaded.

In the head section jQuery and Picbox must be included:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.picbox.min.js"></script>
<link href="picbox.css" media="screen" rel="Stylesheet" type="text/css" />		

And all is needed in body section:

<a href="#" id="gallery"><h1>FIFA WORLD CUP GIRLS 2010</h1></a>
<img id="gallery-loader" src="ajax-loader.gif"  style="display: none;"/>

and then JS:

var Gal = {
	//Max image width form Picasa
	// 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
	imgMax:800,
	//Array of photos
	photos: [],
	//Loader image
	loaderImg: $('#gallery-loader'),
	init: function() {
		if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
			$('#gallery').bind('click',function(e){
				//Prevent default click event
				e.preventDefault();
				//Show loader
				Gal.loaderImg.show();
				//Add JSON feed from Picasa with parameter callback = Gal.prepare to BODY
				$('BODY').append('<script src="http://picasaweb.google.com/data/feed/base/user/114870412886981821775/albumid/5486865816083035937?alt=json&kind=photo&hl=pl&imgmax='+Gal.imgMax+'&callback=Gal.prepare">'+'</sc'+'ript>');
			});
		}
	},
	//data array with photos from Picasa
	prepare: function(data){
		var i = data.feed.entry.length;
		//Start with random photo
		var start = Math.floor(Math.random()*i+1)
		//Define vars at once
		var item,title,imageurl;
		//Iterate thru data
		while (i--) {
		    item = data.feed.entry[i];
			title = item.title.$t;
			imageurl = item.media$group.media$content[0].url;

			//Other possible data
			//var width = item.media$group.media$content[0].width;
			//var height = item.media$group.media$content[0].height;
			//var description = item.media$group.media$description.$t;
			//var link = item.link[2].href;

			//Add photo to photos array
			Gal.photos.push([imageurl,title]);
		}
		//Show gallery
		Gal.show(start);
	},
	show: function(start){
		//Start picbox gallery
		$.picbox(Gal.photos,start,{'loop':true});
		//Hide loader
		Gal.loaderImg.hide();
	}
}
$(document).ready(function(){ Gal.init(); });

And that’s it!

I think this solution has two major advantages: photos can be changed directly in Picasa by 3rd party admin and they are served via Google CDN.

• Galeria jQuery Picbox i JSON z Picasy
• Load content while scrolling with Prototype and JSON-P via Yahoo API
• Simple Edit In Place feature using ierange library
• Twitter API: Stream of messages for query with PHP, JSON and Prototype
• QR Code from hCard using Sumo! parser and Google Chart API

Tags: gallery, google, jquery, JSON, picasa, picbox