Photo Puller

Tagged: JavaScript

November 21, 2011
  • pulls feeds from blogspot, flickr, picasa, and others into a single experience
  • images load as-needed
  • automatically sorts entries based on dates in feeds
  • extensible: custom modules for parsing any type of JSON feed are easy to add
  • no server-side scripting required
  • light, minified JS and CSS (via YUI compressor)
  • uses jQuery for efficient DOM manipulation and can be used as a jQuery plugin
  • customizable CSS

Download version 0.3 (MIT or GPL v2 license)

Thanks to Adam Hilliker, Chris Devers, and Colin Duclos for the use of their photo streams!

How to use

jQuery plugin method:

$(document).ready( function(){

	$("#myPhotoPuller").photoPuller( [
		"http://api.flickr.com/services/feeds/photos_public.gne?id=63830255@N03&lang=en-us&format=json",
		"http://picasaweb.google.com/data/feed/base/user/geekoplex/albumid/5667843763241144337?alt=json&kind=photo&hl=en_US"
	] );

	// If you need it, you can then get a reference to the PhotoPuller object with:
	var puller = $("#myPhotoPuller").data( 'photoPuller' );

});

A more object-oriented method:

$(document).ready( function(){

	var puller = new photoPuller.PhotoPuller( $("#myPhotoPuller").first() );
	puller.pull( [
		"http://api.flickr.com/services/feeds/photos_public.gne?id=63830255@N03&lang=en-us&format=json",
		"http://picasaweb.google.com/data/feed/base/user/geekoplex/albumid/5667843763241144337?alt=json&kind=photo&hl=en_US"
	] );

});

One way isn't better than the other. I'd prefer the second way if I needed to do anything else with the PhotoPuller object, as it's easier to tell what's going on.