Got it outputting pics. Now to turn it into a slideshow.

index.html

@@ -9,9 +9,45 @@
 
 		$(function(){
 
+			// Hold all the photos data
+			var photos = {};
 
+			// Make the call for the set
+			$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=39a716919e3983872672d8579d348f49&photoset_id=72157630212860606&per_page=10&page=1&format=json&nojsoncallback=1", function(photosetData){
+
+				// Loop through the returned photos making calls for image URLs
+				for (var i=0; i < photosetData.photoset.photo.length; i++) {
+
+					// Create a new property in the photos object for a new photo
+					photos[photosetData.photoset.photo[i].id] = {};
+					photos[photosetData.photoset.photo[i].id].title = photosetData.photoset.photo[i].title;
+					photos[photosetData.photoset.photo[i].id].owner = photosetData.photoset.ownername;
+
+					// Make call to get photo size URLs
+					$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&api_key=39a716919e3983872672d8579d348f49&photo_id=" + photosetData.photoset.photo[i].id + "&format=json&nojsoncallback=1", function(sizesData){
+						// Getting the photo ID out of the XHR URL, surely there's a better way to do this
+						var photoID = this.url.match(/photo_id=([0-9]+)/)[1];						
+						// Add the size we want (Medium 640) to our photos object
+						photos[photoID].image = sizesData.sizes.size[6].source
+						// Render this photo on the page
+						renderPhoto(photoID);
+					});
+
+				};	
+
+			});
+
+			// Render a specific photo, takes the ID that'll match something in our photos object
+			function renderPhoto(photoID) {
+				$("#lightbox").append("<img src='" + photos[photoID].image + "' /> <h2>" + photos[photoID].title + " by " + photos[photoID].owner + "</h2>");
+			}
+
 		});
 
+
+
+
+
 	</script>
 
 </head>