Using jQuery to Read a JSON Feed

Select a Person to See Their Photos »

Thanks to Linsday, Nick, Nazly, Mohamed, Mike, Leslie, and David for letting me use their photostreams in this demo!

The photos above are loaded by calling this function:

function loadFlickr(flickrid)
	// Display a loading icon in our display element
	$('#feed').html('<span><img src="images/lightbox-ico-loading.gif" /></span>');

	// Request the JSON and process it
		success:function(feed) {
			// Create an empty array to store images
			var thumbs = [];

			// Loop through the items
			for(var i=0, l=feed.items.length; i < l && i < 16; ++i) 
				// Manipulate the image to get thumb and medium sizes
				var img = feed.items[i].media.m.replace(
					'<a href="$1.jpg"><img src="$1_s.jpg" alt="" /></a>'

				// Add the new element to the array

			// Display the thumbnails on the page

			// A function to add a lightbox effect

This example was put together by Jason Lengstorf for Ennui Design (July 1, 2009)