Vanilla 2

After a fair bit of trial and error I've created a pretty simple to use script to make a gallery out of photos pulled in from a flickr group pool. The pretty photo script will show the title using the title from the description on flickr. The pretty photo slideshow image description will show a clickable link to the image page on flickr as per the flickr API rules.

To use replace the ALLCAPS variables with your own. Get your flickr API here at http://www.flickr.com/services/api/misc.api_keys.html

Enjoy.

HTML:

<div id="gallery">

<p id="nojs">JavaScript is needed to use this gallery. <a href="http://www.flickr.com/groups/GROUPNAME/">See the Flickr group</a>.</p>

</div>

JavaScript:

function flickrURLbuild(farm, server, id, secret, size) {
	// builds a URL to a flickr image in the format
	// http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
	return 'http://farm'	
			+ farm
			+ '.static.flickr.com/' + server
			+ '/' + id
			+ '_' + secret
			+ '_' + size
			+ '.jpg';
}

function flickrPagebuild(userid, photoid) {
	// builds a URL to a flickr image profile in the format
	// http://www.flickr.com/photos/{user-id}/{photo-id}
	return 'www.flickr.com/photos/'
			+ userid
			+ '/' + photoid;
}


$(function() {
	var output = $('<ul class="photos">').appendTo('#gallery');
	var ifo = {
		api : 'YOURAPIKEY', // flickr api
		gid : 'YOURGROUPID', // group id
		fLink : 'http://www.flickr.com/photos/user/',
		maxphts : 21
	};
	var api_images = [],
		api_titles = [],
		api_descriptions = [];

	// Initialise prettyPhoto
	$.fn.prettyPhoto({
		animation_speed: 'fast',
		slideshow: 10000,
		show_title: true,
		theme: 'dark_square',
		autoplay:true
	});

	// Show loading
	$('#nojs').addClass('refresh loading'); // hook up to some CSS

	$.getJSON('http://api.flickr.com/services/rest/?method=flickr.groups.pools.getPhotos&format=json&api_key=' + ifo.api + '&group_id=' + ifo.gid  + '&jsoncallback=?', function(data) {
		if (data.stat == 'ok') {
			$.each(data.photos.photo, function(i) {
				var photo = data.photos.photo[i],
					thumbnail = flickrURLbuild(photo.farm, photo.server, photo.id, photo.secret, 's'),
					display = flickrURLbuild(photo.farm, photo.server, photo.id, photo.secret, 'z'),
					href = 'http://' + flickrPagebuild(photo.owner, photo.id),
					item = $('<li/>');
					
				api_images.push(display);
				api_titles.push(photo.title);
				api_descriptions.push('<a href="' + href + '">View on Flickr</a>');
				var	link = $('<a/>')
						.attr('href', href)
						.attr('title', photo.title)
						.attr('rel', 'prettyPhoto[XXX]');
					link.appendTo(item);
					link.click(function() {
						$.prettyPhoto.open(api_images, api_titles, api_descriptions);
						$.prettyPhoto.changePage(i);
						return false;
					});
				$('<img/>')
					.attr('src', thumbnail)
					.attr('alt', photo.title)
					.attr('width', '75')
					.attr('height', '75')
					.appendTo(link);
				item.appendTo(output);
			});
		$('#nojs').remove();
		}
	});
});