Examples

Photos from @rockersdelight's Flickr.

How to

Once you've downloaded your zip file, move the file flickfeed.js to the appropriate place on your web server.

You'll also see demo.html which contains a fully working version of Flickfeed.

It has the needed HTML and JavaScript code to get you going!

The needed bits of JavaScript you can copy and paste are shown below.

You'll need to place this line right before the </body> tag in your HTML

			
<script type="text/javascript" src="flickfeed.js"></script>
			
		

You'll need to paste this next section right below the above line of code.

This actually kicks off the Flickfeed plugin.

			
<script type="text/javascript">
	Flickfeed({
		userId: "9890806@N04",
		limit: 10,
		target: "#Flickfeed",
		size: 'm', // 240
		sort: 'date-posted-desc'
	});
</script>
			
		

The options listed above are for basic use of the plugin, the only mandatory fields are userId and target. Target is a CSS selector for where you want the images to be populated into, ie. .myFeed or #flickrImages.

Other options for size and sort (if you leave limit out, it defaults to 100):

size:

These sizes are standard Flickr dimensions

m - 240
s - 75
t - 100
z - 640
b - 1024
q - 150 x 150 (square)

sort:

date-posted-asc
date-posted-desc

It may not be immediately obvious how to obtain your Flickr user ID, however you can do so by entering your username into http://idgettr.com/ and following the instructions displayed. This tool will also show you how to get a group_id in case you wanted to grab a group's Flickr feed and not a person's feed. In the above code, you can replace userId with group_id and supply the group ID from idgettr.

You may want to pull your own images into the feed, but only from one of your sets, you can do by additionally passing in "setId". You can get this ID from Flickr.com, from the URL of the photoset itself, like so:

http://www.flickr.com/photos/jacklsmith/sets/72157640428808216/

In this case, for example, we would pass in:

			
setId: "72157640428808216"
			
		

You can have multiple feeds on a page, just create another block of the code above and change the target!

More advanced options you can pass in

If you want a bit more control of how the plugin behaves, then there are more options you can pass in.

template:

				
template: "<a title='' href=''><img src='' /></a>"
				
			

If you need the images to be populated into a certain HTML format, you can supply the markup like above. This line will be for each image.

The plugin will replace with the image URL of your Flickr images.

It will also replace with an external URL to the image on Flickr.com.

will be replaced with the "title" for the image from Flickr.

complete:

		
complete: function(){
	// maybe you want to run the images through a slider plugin? Now's the time!
	$('#Flickfeed img').anotherPlugin(); // for example
}
		
		

This function gets called when all the images are in the DOM and ready for manipulation.

success:

		
success: function(images){
	// images is an array of your Flickr images. If you pass in 'success', then no images will be put on the page
}
		
		

Browser support

IE9 and above

The plugin won't display any images on IE8 and below so as not to error on your page.

I would suggest using a HTML conditional comment:

			
<!--[if lt IE 9]>
	<img src="/path/to/fallback.png" />
<![endif]-->
			
		

Support

You've been kind enough to purchase this plugin, the least I could do is to be kind enough to support your usage of it.

Feel free to email me with any questions/issues you may have.

---

Made by Ben Howdle