MooFlick is a project mainly written in JavaScript, it's free.
Mootools widget to grab and display flickr feed images
Basic widget to display images from the Flickr JSON feed. Grabs a defineable number of the latest images, resizes and displays on page with visual effect. Styles and rotates images to look like small polaroid previews (optional)
More's Request.JSONP used to fetch external images after page load so image loading has no effect on page load time
See included demo for detailed usage instructions
To use the plugin simply instantiate MooFlick and give it the id of the target container (usually a div) and your flickr id.
HTML target div
#HTML
<div id="flickr-items"></div>
Basic CSS styling, you can update this how you like
#CSS
#flickr-items {
width:250px;
margin:15px auto;
height:400px; /* Only for demo purposes - you can remove this*/
}
#flickr-items div {
margin:10px auto;
line-height:110px;
}
#flickr-items div.even {
float:left;
clear:left;
}
#flickr-items div.odd {
float:right;
clear:right;
}
Instantiate the MooFlick class to fetch the images asynchronously
#JS
window.addEvent('domready', function(){
var mf = new MooFlick('flickr-items','10901345@N05', {});
})
The above assumes the target area has an id of flickr-items. For working examples check out the demo!
Thats all!
new MooFlick($('target), 'flickr_user_id', [options])
Image rotation is only visible in the browsers that support it (IE does NOT support it)
The plugin has been tested in Safari, Firefox, Chrome and IE (7 and 8).
Any feedback greatly appreciated!